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档案：

$(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属性，应由用户编辑。
我建议您删除不需要的隐藏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中指定属性并覆盖其他列中的属性。例如，您应该继续在width: 90列中指定phone。
colModel的属性似乎有误。您没有包含从服务器返回的任何测试数据（来自url: "/LicentaREST/rest/customers/getCustomersGrid"），但您似乎混合了name，index和label属性的含义{ {1}}。 colModel就像列的id。它不能有空格。像name这样的值肯定是错误的。你的意思是name: 'Black Listed Status'。您用于label: 'Black Listed Status'属性的值可能应该是index属性的值。如果真的需要，严格建议完全避免指定任何name属性。因此，index例如应该像jqGrid的所有其他列一样更改为name: 'Black Listed Status', index: 'blackListed'。
建议使用label: 'Black Listed Status', name: 'blackListed'代替pager: true，并从pager: "#customersPager"跳过'#customersPager'参数。您可以从页面的HTML标记中删除不需要的inlineNav，并简化代码。
我建议您考虑删除<div id="customersPager"></div>（正确为height: "330"）以使用默认height: 330。 height: "auto"值将定义案例中网格的高度。默认设置rowNum是最佳选择，不是在所有情况下，而是在最多的情况下。
您应该查看您在页面上包含的CSS和JS文件。包含height: "auto"，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的{{1}}的所有设置。
建议在页面上包含Font Awesome 4.x CSS并添加en-US选项。它改善了网格中显示的图标的外观。您应该从grid.locale-en.js的调用中删除iconSet: "fontAwesome"选项。在使用默认jQuery UI图标的情况下，它是默认值，如果您使用Font Awesome图标，则该值将是错误的。 addicon: 'ui-icon-plus'的来电可以缩短为inlineNav
您在inlineNav中使用的变量grid.jqGrid('inlineNav', {edit: false, save: false, cancel: false, addtext: 'Add', addParams: { position: 'last' }}似乎未定义。我建议您将customersOrdersGrid作为ondblClickRow函数的第一个语句，以便更容易发现此类错误。
您没有发布有关行总数的任何信息，可以在服务器上返回。如果总行数不够大，我建议您使用"use strict";选项并立即返回所有数据。例如，小于1000或小于10000. The demo可用于测试本地分页的性能，排序和过滤网格，每行有4000行，13列和20行。 Another demo使用甚至40000行，如果您使用Chrome，Firefox或Edge等现代网络浏览器，它也会非常快速地运行。您应该考虑将数据发送到服务器的时间以及操作的所有开销。 $(function() {...});的使用简化了服务器代码和客户端代码，并在大多数情况下改善了网格的责任。确切的选择仍然取决于网格中的总行数。这对于非常多的行来说并不好。

免费jqGrid - 行不进入编辑

1 个答案: