如何在 jqGrid 中选择数据行答案

【问题标题】：How to get Data Row Selected in jqGrid如何在 jqGrid 中选择数据行
【发布时间】：2012-05-09 10:41:18
【问题描述】：

我是 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"
          });

当第一次点击细节按钮得到错误值但之后返回正确的数据

谢谢大家

【问题讨论】：

标签： jquery jqgrid jqgrid-asp.net jqgrid-formatter

【解决方案1】：

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

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

下一句。您在所有列中使用sortable: true，但sortable 属性的默认值已经是true（请参阅the documentation）。另外，我建议您在 jqGrid 的定义中使用column templates。例如，在第一个网格的定义中，您多次使用相同的属性来定义带有复选框的隐藏列。此外，有许多列具有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），设置其他参数如postData 的requestId，然后调用.trigger('reloadGrid', [{page: 1}])。这种方法会更有效。

【讨论】：

@Oleg：谢谢你的帮助，我跟踪代码，首先当用户点击详细信息时，selRowId 值为空，但我选择了行，但在用户第二次点击 selRowId 时获得了正确的数据，就在第一次时间返回不正确的数据。请帮我。谢谢。
@MohsenBahrzadeh：我在回答的第一句话中写道，这是因为您使用了beforeSelectRow 回调，该回调将在before 选择行之前调用。解决此问题的最简单方法是使用onSelectRow: function (id, state, e) {...} 而不是beforeSelectRow: function (rowid, e) {...}