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

詳細ボタンを最初にクリックすると false の値が取得されますが、その後は正しいデータが返されます

皆さんありがとう

Answer 1

まず第一に、私はあなたの主な質問に答えます。問題は、コールバックselrow内でパラメーター (選択した行の ID)を取得することです。beforeSelectRow「詳細」ボタンの最初のクリックでは、行は選択されていません。そのため、myGrid.jqGrid('getGridParam', 'selrow')返され、id=null の行の列から値を取得するためにnull使用できなくなります。getCell'IN_CUSTOMS''OUT_CUSTOMS'

コールバックから常に true を返しbeforeSelectRowます。したがって、ユーザーが「詳細」ボタンをクリックした場合に行の選択を妨げたくありません。その場合は、 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
});

コードを減らして管理しやすくする (保守しやすい) ようにします。オプションの使用labelプロパティcolModelのため、含める必要はありません。colNames

同様に、2 番目のグリッドを定義するコードも減らすことができます。

別の発言。コードの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') {
    ....
}

最後の発言。2 番目のグリッドを使用GridUnloadして、詳細を含めて再作成します。.trigger('reloadGrid', [{page: 1}])代わりに使用するとより効果的です (こちらを参照)。最初に、 で 2 番目のグリッドを作成できますdatatype: 'local'。サーバーからのデータのロードを防ぎます。グリッドが作成された直後に非表示にする div に 2 番目のグリッドを配置し、必要に応じて div を表示できます。2 番目のグリッドに「json」setGridParamに変更するために使用できる情報を入力する必要がある場合(回答を参照)、 ofなどの他のパラメーターを設定してから を呼び出します。方法はより効果的に機能します。datatyperequestIdpostData.trigger('reloadGrid', [{page: 1}])