免費jqGrid-行未輸入編輯

Question

我正在為一個小項目使用Free 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文件：

$(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

首先，我嚴格建議使用發布的最新免費jqGrid版本。 當前是4.13.2。 它包含4.13.0版中現有的一些小錯誤修復。 所有修復程序都與您的問題無關。

我在您的代碼中看到以下問題：

• 主要問題是缺少editable: true網格列中的editable: true屬性，用戶應該可以對其進行編輯。
• 我建議您刪除不需要的隱藏id列，並使用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" ），但是似乎您混合了colModel的name ， index和label屬性的含義。 name類似於列的ID。 它不能有空格。 像name: 'Black Listed Status'這樣的值肯定是錯誤的。 您的意思可能是label: 'Black Listed Status' 。 您用於index屬性的值可能應該是name屬性的值。 嚴格建議完全避免指定任何index屬性（如果確實需要）。 因此label: 'Black Listed Status', name: 'blackListed'像label: 'Black Listed Status', name: 'blackListed'所有其他列一樣label: 'Black Listed Status', name: 'blackListed' name: 'Black Listed Status', index: 'blackListed'可能應該更改為label: 'Black Listed Status', name: 'blackListed' 。
• 建議使用pager: true而不是pager: "#customersPager"並從inlineNav跳過'#customersPager'參數。 您可以從頁面的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.css您還可以包含ui.jqgrid.min.css 。 您應該刪除grid.locale-en.js因為文件jquery.jqgrid.min.js已經包含了grid.locale-en.js en-US所有設置。
• 建議在頁面上包括Font Awesome 4.x CSS並添加iconSet: "fontAwesome"選項。 它改善了網格中顯示的圖標的外觀。 您應該刪除addicon: 'ui-icon-plus'從看漲期權inlineNav 。 如果使用默認的jQuery UI圖標，則為默認值；如果使用Font Awesome圖標，則該值為錯誤。 inlineNav的調用可以減少為grid.jqGrid('inlineNav', {edit: false, save: false, cancel: false, addtext: 'Add', addParams: { position: 'last' }}
• 您在ondblClickRow使用的變量customersOrdersGrid似乎未定義。 我建議您包括"use strict"; 作為$(function() {...});的第一條語句$(function() {...}); 函數查找此類錯誤更容易。
• 您沒有發布有關總行數的任何信息，這些信息可以在服務器上返回。 我建議您使用loadonce: true選項，如果總行數不夠大，請立即返回所有數據 。 例如，小於1000或小於10000。 該演示可用於測試每頁4000行，13列和20行的網格的本地分頁，排序和篩選的性能。 另一個演示甚至使用了40000行，如果您使用Chrome，Firefox或Edge等現代網絡瀏覽器，它也可以非常快速地工作。 您應該考慮將數據發送到服務器的時間以及操作的所有開銷。 loadonce: true的用法在大多數情況下都簡化了服務器代碼和客戶端代碼，並提高了網格的責任感。 確切的選擇仍然取決於網格中的總行數。 對於大量的行來說，這將是不好的。