jquery - 如何在jqGrid中选择数据行

Question

我是 jqGrid 的初学者，我在页面中有 2 个 jqGrid，在 Grid1 中我有 inCustom 和 OutCustom 我希望用户在 Grid 中单击以获取数据 inCustom 和 outCustom 编写此代码

var grid = $('#list');
grid.jqGrid({
    url: 'jQGridHandler.ashx',
    postData: { ActionPage: 'ClearanceRequest', Action: 'Fill' },
    ajaxGridOptions: { cache: false },
    loadonce: true,
    direction: "rtl",
    datatype: 'json',
    height: 600,
    width: 1000,
    colNames: ['', '', '', ' ', '', '', '', '', '',
               '', '', ' ', '', '', '', '', '', '',
               '', ' ', '', '', '', '',
               '', '', '', '', '', '', ' ',
               '', '', '', '', '', ''],
    colModel: [
        { name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
        { name: 'REQUEST_DATE', width: 50, sortable: true },
        { name: 'REQUEST_NO', width: 60, sortable: true },
        { name: 'CUSTOMER_ID', width: 100, sortable: true },
        { name: 'TRANSPORT_TYPE', width: 40, sortable: true },
        { name: 'CLEARANCE_TYPE', width: 50, sortable: true },
        { name: 'IMPORT_EXPORT', width: 30, sortable: true, editable: false,
            edittype: 'checkbox', editoptions: { value: "True:False" },
            formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
        },
        { name: 'WAYBILL_NO', width: 50, sortable: true },
        { name: 'WAYBILL_OFFICE', width: 100, sortable: true },
        { name: 'MANIFEST', width: 200, sortable: true, hidden: true },
        { name: 'STORE_BILL', width: 100, sortable: true, hidden: true },
        { name: 'DIRECT_NO', width: 100, sortable: true, hidden: true },
        { name: 'STORE_DATE', width: 100, sortable: true, hidden: true },
        { name: 'INOUT_DATE', width: 50, sortable: true, hidden: true },
        { name: 'SOURCE_COUNTRY', width: 30, sortable: true, hidden: true },
        { name: 'SOURCE_CITY', width: 80, sortable: true, hidden: true },
        { name: 'DESTINATION_COUNTRY', width: 100, sortable: true, hidden: true },
        { name: 'IN_CUSTOMS', width: 200, sortable: true, hidden: true },
        { name: 'OUT_CUSTOMS', width: 100, sortable: true, hidden: true },
        { name: 'INSURER_ID', width: 100, sortable: true, hidden: true },
        { name: 'INSURANCE_NO', width: 100, sortable: true, hidden: true },
        { name: 'CLEARANCE_PERSON', width: 50, sortable: true, hidden: true },
        { name: 'PROXY_NO', width: 30, sortable: true, hidden: true },
        { name: 'FACTOR_NO', width: 80, sortable: true, hidden: true },
        { name: 'SHIP_NAME', width: 100, sortable: true, hidden: true },
        { name: 'TRAVEL_NO', width: 200, sortable: true, hidden: true },
        { name: 'INDENT_NO', width: 100, sortable: true, hidden: true },
        { name: 'COOTAG_NO', width: 100, sortable: true, hidden: true },
        { name: 'PERMIT_NO', width: 100, sortable: true, hidden: true },
        { name: 'CLEARANCE_NO', width: 50, sortable: true, hidden: true },
        { name: 'CARNETIR_NO', width: 30, sortable: true, hidden: true },
        { name: 'PURCHASE_TYPE', width: 80, sortable: true, hidden: true },
        { name: 'ALL_VALUE', width: 100, sortable: true, hidden: true },
        { name: 'FREIGHT_STATUS', width: 30, sortable: true, editable: false,
            edittype: 'checkbox', editoptions: { value: "True:False" },
            formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
        },
        { name: 'COPY_ORIGINAL', width: 30, sortable: true, editable: false,
            edittype: 'checkbox', editoptions: { value: "True:False" },
            formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
        },
        { name: 'REMARK', width: 100, sortable: true, hidden: true },
        { name: 'details', width: 20, sortable: false, search: false,
            formatter: function () {
                return "<span class='ui-icon ui-icon-document'></span>";
            }
        }
    ],
    gridview: true,
    rowNum: 30,
    rowList: [30, 60, 90],
    pager: '#pager',
    sortname: 'WorkOrderNo',
    viewrecords: true,
    sortorder: 'ASC',
    rownumbers: true,
    beforeSelectRow: function (rowid, e) {
        var iCol = $.jgrid.getCellIndex(e.target);
        // alert(rowid);
        console.log(rowid);
        //listItem
        console.log($.jgrid.getCellIndex(e.target));
        if ($.jgrid.getCellIndex(e.target) == 37) {
            $("#listItem").jqGrid("GridUnload");
            var gridItem = $('#listItem');
            gridItem.jqGrid({
                url: 'jQGridHandler.ashx',
                postData: { ActionPage: 'ClearanceItems', Action: 'Fill', requestId: rowid },
                ajaxGridOptions: { cache: false },
                loadonce: true,
                direction: "rtl",
                datatype: 'json',
                height: 200,
                colNames: ['', '', '', '', ' ', ' ', '',
                           '', '', 'ا', ' ', '', ' ',
                           '', '', ' ', '  ',
                           '', '', '', ' ', '  ', ' ', ' ', ''],
                colModel: [
                    { name: 'REQUEST_ID', width: 100, sortable: true },
                    { name: 'ITEM_NO', width: 200, sortable: true },
                    { name: 'GOODS_DESCRIPTION', width: 100, sortable: true },
                    { name: 'QUANTITY', width: 100, sortable: true },
                    { name: 'PACKING_TYPE', width: 100, sortable: true },
                    { name: 'GROSS_WEIGHT', width: 50, sortable: true },
                    { name: 'TARE_WEIGHT', width: 30, sortable: true },
                    { name: 'MEASUREMENT_TYPE', width: 80, sortable: true, hidden: true },
                    { name: 'GOODS_PRICE', width: 100, sortable: true, hidden: true },
                    { name: 'GOODS_CURRENCY', width: 200, sortable: true, hidden: true },
                    { name: 'GOODS_CURRENCY_RATE', width: 100, sortable: true, hidden: true },
                    { name: 'FREIGHT_PRICE', width: 100, sortable: true, hidden: true },
                    { name: 'FREIGHT_CURRENCY', width: 100, sortable: true, hidden: true },
                    { name: 'FREIGHT_CURRENCY_RATE', width: 50, sortable: true, hidden: true },
                    { name: 'INSURANCE_PRICE', width: 30, sortable: true, hidden: true },
                    { name: 'INSURANCE_CURRENCY', width: 80, sortable: true, hidden: true },
                    { name: 'INSURANCE_CURRENCY_RATE', width: 100, sortable: true, hidden: true },
                    { name: 'TARIFF_NO', width: 200, sortable: true, hidden: true },
                    { name: 'CUSTOM_PRICE', width: 100, sortable: true, hidden: true },
                    { name: 'WARRANTY_PRICE', width: 100, sortable: true, hidden: true },
                    { name: 'INOUT_DATE', width: 100, sortable: true, hidden: true },
                    { name: 'VEHICLE_TYPE', width: 50, sortable: true, hidden: true },
                    { name: 'VEHICLE_NO', width: 30, sortable: true, hidden: true },
                    { name: 'WAREHOUSE_ID', width: 80, sortable: true, hidden: true },
                    { name: 'REMARK', width: 80, sortable: true, hidden: true }
                ],
                gridview: true,
                rowNum: 20,
                rowList: [20, 40, 60],
                pager: '#pagerItem',
                viewrecords: true,
                sortorder: 'ASC',
                rownumbers: true
            });
            gridItem.jqGrid('navGrid', '#pagerItem', { add: true, edit: true, del: true },
                {}, {}, {}, { multipleSearch: true, overlay: false, width: 460 });

            var myGrid = grid;
            var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
            celValue = myGrid.jqGrid('getCell', selRowId, 'IN_CUSTOMS');
            celValue2 = myGrid.jqGrid('getCell', selRowId, 'OUT_CUSTOMS');

            console.log(celValue);

            console.log(celValue2);

            alert(celValue);
            alert(celValue2);

            $("#POPUP2").dialog({ width: 780 });
        }

        return true;
    }
});
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: true },
    {}, {}, {}, { multipleSearch: true, overlay: false, width: 460 })
         .navButtonAdd("#pager", {
             caption: "",
             buttonicon: "ui-icon-plus",
             onClickButton: function () {
                 // alert("Adding Row");
                 $("#POPUP1").dialog({ width: 730 });
             },
             position: "first"

         })
         .navButtonAdd("#pager", {
             caption: "",
             buttonicon: "ui-icon ui-icon-pencil",
             onClickButton: function () {

             },
             position: "first"

         })
          .navButtonAdd("#pager", {
              caption: "",
              buttonicon: "ui-icon ui-icon-trash",
              onClickButton: function () {

              },
              position: "first"
          });

首次单击详细信息按钮时获取错误值，但之后返回正确的数据

谢谢大家

Answer 1

首先我回答一下你的主要问题。问题是您在 beforeSelectRow 回调中获取了 selrow 参数(所选行的 id)。第一次单击“详细信息”按钮时，未选择任何行。因此 myGrid.jqGrid('getGridParam', 'selrow') 将返回 null 并且您将无法使用 getCell 从 获取值id=null 的行的 code>'IN_CUSTOMS' 和 'OUT_CUSTOMS' 列。

您始终从 beforeSelectRow 回调返回 true。因此，如果用户单击“详细信息”按钮，您不想阻止行选择。在这种情况下，我建议您最好使用 onCellSelect打回来。顺便说一句，回调有 iCol (被单击的单元格的索引)作为附加参数。它将进一步简化您的代码。

下一条评论。您在所有列中使用 sortable: true，但 sortable 属性的默认值已经是 true (请参阅 the documentation )。另外我建议您使用 column templates在jqGrid的定义中。例如，在第一个网格的定义中，您使用多次相同的属性来定义带有复选框的隐藏列。此外，还有许多列的 width: 100 并且所有列都有空的列标题 ''。所以你可以将第一个网格定义为

var grid = $('#list'),
    hiddenCheckboxTemplate = { width: 30, editable: false,
        edittype: 'checkbox', editoptions: { value: "True:False" },
        formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
    };
grid.jqGrid({
    colModel: [
        { name: 'REQUEST_ID', hidden: true },
        { name: 'REQUEST_DATE', width: 50 },
        { name: 'REQUEST_NO', width: 60 },
        { name: 'CUSTOMER_ID' },
        { name: 'TRANSPORT_TYPE', width: 40 },
        { name: 'CLEARANCE_TYPE', width: 50 },
        { name: 'IMPORT_EXPORT', template: hiddenCheckboxTemplate },
        { name: 'WAYBILL_NO', width: 50 },
        { name: 'WAYBILL_OFFICE' },
        { name: 'MANIFEST', width: 200, hidden: true },
        { name: 'STORE_BILL', hidden: true },
        { name: 'DIRECT_NO', hidden: true },
        { name: 'STORE_DATE', hidden: true },
        { name: 'INOUT_DATE', width: 50, hidden: true },
        { name: 'SOURCE_COUNTRY', width: 30, hidden: true },
        { name: 'SOURCE_CITY', width: 80, hidden: true },
        { name: 'DESTINATION_COUNTRY', hidden: true },
        { name: 'IN_CUSTOMS', width: 200, hidden: true },
        { name: 'OUT_CUSTOMS', hidden: true },
        { name: 'INSURER_ID', hidden: true },
        { name: 'INSURANCE_NO', hidden: true },
        { name: 'CLEARANCE_PERSON', width: 50, hidden: true },
        { name: 'PROXY_NO', width: 30, hidden: true },
        { name: 'FACTOR_NO', width: 80, hidden: true },
        { name: 'SHIP_NAME', hidden: true },
        { name: 'TRAVEL_NO', width: 200, hidden: true },
        { name: 'INDENT_NO', hidden: true },
        { name: 'COOTAG_NO', hidden: true },
        { name: 'PERMIT_NO', hidden: true },
        { name: 'CLEARANCE_NO', width: 50, hidden: true },
        { name: 'CARNETIR_NO', width: 30, hidden: true },
        { name: 'PURCHASE_TYPE', width: 80, hidden: true },
        { name: 'ALL_VALUE', hidden: true },
        { name: 'FREIGHT_STATUS', template: hiddenCheckboxTemplate },
        { name: 'COPY_ORIGINAL', template: hiddenCheckboxTemplate },
        { name: 'REMARK', hidden: true },
        { name: 'details', width: 20, sortable: false, search: false,
            formatter: function () {
                return "<span class='ui-icon ui-icon-document'></span>";
            }
        }
    ],
    cmTemplate: { width: 100, label: '' },
    ... other option. No colNames are needed because of usage label
});

减少代码并使其更易于管理(易于维护)的方式。由于在 colModel 中使用 label 属性，因此不应包含 colNames 选项。

以同样的方式，您也可以减少定义第二个网格的代码。

另一句话。代码 if ($.jgrid.getCellIndex(e.target) == 37) { 很难理解和维护。如果您要在网格中包含其他列，或者甚至更改某些选项的值(例如 rownumbers)，则应更改常量 37。您要做的只是测试用户是否单击了“详细信息”列。我建议您更好地使用列名称。例如

var colModel = $(this).jqGrid('getGridParam', 'colModel'),
    cm = colModel[iCol]; // iCol is defined before as $.jgrid.getCellIndex(e.target)
if (cm && cm.name === 'details') {
    ....
}

最后一句话。您使用GridUnload，然后重新创建包含详细信息的第二个网格。使用 .trigger('reloadGrid', [{page: 1}]) 会更有效(请参阅 here )。首先，您可以使用 datatype: 'local' 创建第二个网格。它将阻止从服务器加载数据。您可以将第二个网格放置在创建网格后直接隐藏的 div 中，并在需要时显示该 div。如果第二个网格需要填充信息，您可以使用 setGridParam 将 datatype 更改为“json”(参见 the answer )，设置其他参数，例如 requestId postData ，然后调用 .trigger('reloadGrid', [{page: 1}])。这种方式将会更加有效。