免費jqGrid - 行未進入編輯

Question

我正在使用免費的jqGrid 4.13.0爲一個小項目，我似乎無法使行從動作按鈕和inlineNav編輯按鈕進入編輯模式。

行通過「添加」按鈕添加，但他們不進入編輯模式。嘗試通過使用任何按鈕進入編輯模式也不起作用。

難道是他們在HTML中輸入的CSS/JS文件的順序？我錯過了一個js文件？

我目前有2個網格幾乎相同，都沒有工作。

<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.css"></link> 
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.min.css"></link> 
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.theme.css"></link> 
<link rel="stylesheet" type="text/css" media="screen" href="jqueryGrid/css/ui.jqgrid.css"></link> 
<link rel='stylesheet' href='css/bootstrap.css'></link> 
<link rel="stylesheet" type="text/css" href="css/cascade.css" /> 

<script src="jquery/jquery-1.12.1.min.js" type="text/javascript"></script> 
<script src="jqueryUI/jquery-ui.min.js" type="text/javascript"></script> 
<script src="jqueryGrid/js/i18n/grid.locale-en.js" type="text/javascript"> </script> 
<script src="jqueryGrid/js/jquery.jqgrid.min.js" type="text/javascript">  </script> 

<script src="customerGrid.js" type="text/javascript" ></script> 
<script src="customerOrderGrid.js" type="text/javascript" ></script> 

//// customerGrid.js文件：

所有我嚴格推薦使用最新的免費版jqGrid的，這是公佈的

$(function() { 
    var grid = $("#customersGrid"); 
    grid.jqGrid({ 
     url: "/LicentaREST/rest/customers/getCustomersGrid", 
     mtype: "POST", 
     datatype: "json", 
     ajaxGridOptions: {contentType: 'application/json; charset=utf-8'}, 
     serializeGridData: function (postData) { 
      if (postData.searchField === undefined) postData.searchField = null; 
      if (postData.searchString === undefined) postData.searchString = null; 
      if (postData.searchOper === undefined) postData.searchOper = null; 
      return JSON.stringify(postData); 
     } 
     }, 
     colModel: [ 
      {name: 'ID', index: 'id', width: 55, hidden: true}, 
      {name: 'Name', index: 'name', width: 80, align: 'right', search: false}, 
      {name: 'Phone', index: 'phone', width: 90}, 
      {name: 'Address', index: 'address', width: 80, align: 'right', search: false}, 
      {name: 'Client Since', index: 'clientSince', width: 80, align: 'right', search: false}, 
      {name: 'Total Orders', index: 'totalOrders', width: 80, align: 'right', search: false}, 
      {name: 'Total Ammount Orders', index: 'totalAmmountOrders', width: 80, align: 'right', search: false}, 
      {name: 'Canceled Orders', index: 'canceledOrders', width: 80, align: 'right', search: false}, 
      {name: 'Black Listed Status', index: 'blackListed', width: 80, align: 'right', search: false}, 

     ], 
     ondblClickRow: function (rowid) { 
      $.ajax({ 
       type: "POST", 
       url: "/LicentaREST/rest/getCustomerOrders", 
       data: JSON.stringify(rowid), 
       success: function (response) { 
        if (response.errorCode == 0) { 
         customersOrdersGrid.jqGrid('clearGridData').jqGrid('setGridParam', 'data', response.data); 
        } 
        else { 
        } 
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 
        console.log(textStatus, errorThrown); 
       } 
      }); 
     }, 
     pager: "#customersPager", 
     rowNum: 15, 
     rowList: [15,50, 100, 250,500], 
     rownumbers: true, 
     sortname: 'id', 
     sortorder: 'desc', 
     viewrecords: true, 
     caption: 'Customers', 
     height: "330", 
     autowidth: true 

    }); 
    grid.jqGrid('inlineNav', '#customersPager', 
     { 
      add: true, 
      edit: false, 
      save: false, 
      cancel: false, 
      addicon: 'ui-icon-plus', 
      addtext: 'Add', 
      addedrow: 'last' 
    }); 
}); 

Answer 1

第一。目前是4.13.2。它包含4.13.0版本中存在的一些小錯誤修復。所有修復與你的問題沒有關係。

我看到你的代碼存在以下問題：

• 的主要問題是缺少editable: true財產應該是由用戶編輯的網格的列。
• 我建議您刪除不需要的隱藏的id列，並使用jqGrid的cmTemplate: { editable: true }選項在網格的所有列中設置editable: true屬性。如果您在jqGrid的大多數列中使用其他一些屬性，例如width: 80, align: 'right', search: false那麼最好將cmTemplate：cmTemplate: { editable: true, autoResizable: true, width: 80, align: 'right', search: false}中的值移動到，默認值爲colModel的屬性值。您應該跳過指定colModel中的屬性並覆蓋其他列中的屬性。例如，您應該在phone列中繼續指定width: 90。
• colModel的屬性似乎是錯誤的。您不包含從服務器返回的任何測試數據（來自url: "/LicentaREST/rest/customers/getCustomersGrid"），但您似乎混合了name,index和label屬性colModel的含義。 name就像是該列的ID。它不能有空格。像name: 'Black Listed Status'這樣的值是完全錯誤的。你的意思可能是label: 'Black Listed Status'。您用於index屬性的值應該可能是name屬性的值。如果真的需要，嚴格建議避免指定任何index屬性。因此，name: 'Black Listed Status', index: 'blackListed'例如應該像jqGrid的所有其他列一樣更改爲label: 'Black Listed Status', name: 'blackListed'。
• 建議使用pager: true而不是pager: "#customersPager"，並跳過'#customersPager'參數inlineNav。您可以從頁面的HTML標記中刪除不需要的<div id="customersPager"></div>，並簡化代碼。
• 我建議考慮刪除height: "330"（更正爲height: 330）以使用默認height: "auto"。 rowNum值將定義案例中網格的高度。默認設置height: "auto"不是所有情況下的最佳選擇，但最多。
• 您應該查看您在頁面上包含的CSS和JS文件。包括jquery-ui.css，jquery-ui.min.css和jquery-ui.theme.css是錯誤的。僅包括jquery-ui.min.css就足夠了。您可以包含ui.jqgrid.min.css而不是包含ui.jqgrid.css。您應該刪除grid.locale-en.js，因爲文件jquery.jqgrid.min.js已經包含en-US的所有設置，從grid.locale-en.js。
• 建議在頁面中包含Font Awesome 4.x CSS並添加iconSet: "fontAwesome"選項。它改善了網格中顯示的圖標的外觀。您應該從inlineNav的呼叫中刪除addicon: 'ui-icon-plus'選項。這是使用默認jQuery UI圖標時的默認值，如果您使用Font Awesome圖標，該值將會出錯。 inlineNav的呼叫可以縮減爲grid.jqGrid('inlineNav', {edit: false, save: false, cancel: false, addtext: 'Add', addParams: { position: 'last' }}
• 變量customersOrdersGrid，您在ondblClickRow中使用的變量似乎未定義。我建議您將"use strict";作爲$(function() {...});函數的第一個語句，以便找到更容易發生的此類錯誤。
• 您不會發布有關可能在服務器上返回的總行數的任何信息。如果行數不夠大，我建議您使用loadonce: true選項並一次返回所有數據。例如小於1000或小於10000. The demo可用於測試本地的性能每頁4000行，13列和20行的網格的分頁，排序和過濾。 Another demo甚至可以使用40000行，如果您使用Chrome，Firefox或Edge等現代網絡瀏覽器，它的工作速度也非常快。您應該考慮將數據發送到服務器的時間以及操作的所有開銷。使用loadonce: true簡化了服務器代碼和客戶端代碼，並在大多數情況下提高了電網的責任。確切的選擇仍然取決於網格中的總行數。這對於很多行是不好的。