如何在jqGrid中选择数据行

Question

如何在jqGrid中选择数据行

Pou*_*uya 5 jquery jqgrid jqgrid-asp.net jqgrid-formatter

我是jqGrid的首发,我在页面中有2个jqGrid,在Grid1中我有inCustom和OutCustom我希望用户点击Grid获取Data 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"
          });

Run Code Online (Sandbox Code Playgroud)

首次单击detils按钮获取false值但之后返回正确的数据在此输入图像描述

谢谢大家

Answer 1

Ole*_*leg 5

首先,我回答你的主要问题.问题是你selrow在beforeSelectRow回调中得到参数(所选行的id).首次单击"详细信息"按钮时,不会选择任何行.因此myGrid.jqGrid('getGridParam', 'selrow')将返回null,您将无法使用id = null getCell获取行的值'IN_CUSTOMS'和'OUT_CUSTOMS'列.

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

下一句话.您sortable: true在所有列中使用,但sortable属性的默认值已经存在true(请参阅文档).另外我建议你在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
});

Run Code Online (Sandbox Code Playgroud)

在这种方式中,您可以减少代码并使其更易于管理(易于维护).由于使用label属性,colModel因此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') {
    ....
}

Run Code Online (Sandbox Code Playgroud)

最后一句话.您使用GridUnload然后重新创建包含详细信息的第二个网格.使用它会更有效.trigger('reloadGrid', [{page: 1}])(见这里).在开始时,您可以创建第二个网格datatype: 'local'.它将阻止从服务器加载数据.您可以将第二个网格放置在创建网格后直接隐藏的div中,并在需要时显示div.如果第二栅格无需充满信息,您可以使用setGridParam更改datatype为"JSON"(见答案),设置其他参数,如requestId中postData,然后调用.trigger('reloadGrid', [{page: 1}]).这种方式将更有效地发挥作用.

归档时间：	14 年前
查看次数：	9842 次
最近记录：	14 年前