免费 jqGrid - 行未进入编辑

Free jqGrid - Row not entering edit

本文关键字:编辑 jqGrid 免费      更新时间:2023-09-26

我正在为一个小项目使用 Free jqGrid 4.13.0,我似乎无法使行从操作按钮和inlineNav编辑按钮进入编辑模式。

行由"添加"按钮添加,但它们不会进入编辑模式。尝试使用任何按钮进入编辑模式也不起作用。

可能是 css/js 文件中的顺序,它们被输入到 html 中吗?我是否缺少 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'
    });
});

首先,我严格推荐使用已发布的最新免费jqGrid版本。目前是 4.13.2。它包含版本 4.13.0 中存在的一些小错误修复。所有修复程序都与您的问题无关。

我在您的代码中看到以下问题:

  • 主要问题是网格列中缺少editable: true属性,该属性应该可由用户编辑。
  • 我建议您删除不需要的隐藏idcmTemplate: { editable: true }并使用 jqGrid 的选项在网格的所有列中设置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的含义,indexcolModellabel属性。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" 并从 inlineNav 中跳过'#customersPager'参数。您可以从页面的 HTML 标记中删除不需要的<div id="customersPager"></div>,并稍微简化代码。
  • 我建议考虑删除height: "330"(正确的是height: 330(以使用默认height: "auto"rowNum值将定义案例中网格的高度。默认设置height: "auto"不是在所有方案中都是最佳选择,而是在大多数方案中都是最佳选择。
  • 您应该查看页面上包含的 CSS 和 JS 文件。包括jquery-ui.cssjquery-ui.min.cssjquery-ui.theme.css是错误的。只需包括jquery-ui.min.css就足够了.您可以包含ui.jqgrid.min.css,而不是包括ui.jqgrid.css。您应该删除grid.locale-en.js因为文件jquery.jqgrid.min.js已经包含grid.locale-en.js en-US的所有设置。
  • 建议在页面上包含Font Awesome 4.x CSS并添加iconSet: "fontAwesome"选项。它改进了网格中显示的图标的外观。您应该从inlineNav的调用中删除addicon: 'ui-icon-plus'选项。这是使用默认jQuery UI图标时的默认值,如果您使用字体真棒图标,则该值将是错误的。inlineNav的呼唤可以减少到grid.jqGrid('inlineNav', {edit: false, save: false, cancel: false, addtext: 'Add', addParams: { position: 'last' }}
  • 您在ondblClickRow中使用的变量 customersOrdersGrid 似乎未定义。我建议您包含"use strict";作为$(function() {...});函数的第一个语句,以查找更容易的此类错误。
  • 您没有发布有关行总数的任何信息,这些信息可能会在服务器上返回。我建议您使用loadonce: true选项,如果总行数不够大,请一次返回所有数据。例如,小于 1000 或小于 10000。该演示可用于测试网格的本地分页、排序和过滤性能,每页 4000 行、13 列和 20 行。另一个演示甚至使用40000行,如果您使用Chrome,Firefox或Edge等现代Web浏览器,它也可以非常快速地工作。您应该考虑将数据发送到服务器的时间以及操作的所有开销。loadonce: true的使用简化了服务器代码和客户端代码,并在大多数情况下提高了网格的责任。确切的选择仍然取决于网格中的总行数。对于非常多的行,这将不利。