1

行をクリックするのではなく、複数選択ボックスのみを使用して行を選択したいのですが、この回答を読みましたが、onSelectRow が起動しませんでした。クリックして行を選択してデータを表示したいのですが、チェックボックスセットはボックスをクリックするだけです。助けてください:(

 grid.jqGrid({
            url: 'jqGridHandler.ashx',
            datatype: 'json',
            width: $("#parentDiv").width(),
            height: a,
            direction: "rtl",
            colNames: ['Action', 'A', 'W', 'Date', 'Num', 'Sender', 'F', 'EOSysNum', 'PctIndNum', 'Subject', 'PctAssignSubject', 'PctAssignType', '', 'Date2', 'Assign', '', 'PctTabName', 'Andicator', '', 'Datetime of Show', 'SysCode', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '','','','','','','','','',''],
            colModel: [
                {
                    name: 'act',
                    width: ($.browser.webkit ? 25 : 25),
                    align: 'center',
                    sortable: false,
                    formatter: 'actions',
                    formatoptions: {
                        keys: true,
                        delOptions: myDelOptions,
                        delbutton: false,
                        editbutton: false
                    }
                },
                {
                    name: 'IsAttach',
                    width: 5,
                    sortable: false,
                    search: false,
                    template: ActionTemplate,
                    formatter: function (cellval, opts, rowObject, action) {

                        return (cellval == 'True' ? "<span  class='ui-icon icon-Attachment' style='float:left'></span>" : "");
                    }
                },
                {
                    name: 'IsContent',
                    width: 6,
                    sortable: false,
                    search: false,
                    template: ActionTemplate,
                    formatter: function (cellval, opts, rowObject, action) {
                        return (cellval == 'True' ? "<span class='ui-icon icon-Word' style='float:left'></span>" : "");
                    }
                },
                {
                    name: 'PctLettDate',
                    width: 30,
                    sortable: true,
                    template: CenterTemplate,
                  //  formatter: function (cellvalue, options, rowObject) {
                        //return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
                       // return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue);
                    //}
                },
                {
                    name: 'PctLettNum',
                    width: 30,
                    sortable: true,
                   // template: numberTemplate,
                   // formatter: function (cellvalue, options, rowObject) {
                       // return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue);
                   // }
                },
                {
                    name: 'PctAssignPrs',
                    width: 80,
                    sortable: true,
                   // formatter: function (cellvalue, options, rowObject) {
                     //   return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
                    //}
                },
                {
                    name: 'PctAssignImi',
                    width: 15,
                    sortable: true,
                    template: CenterTemplate,
                  //  formatter: function (cellvalue, options, rowObject) {
                     //   return (rowObject["PctViewDate"] == '' ? '<font  style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
                    //}
                },
                { name: 'EOSysNum', width: 30, sortable: true, hidden: true },
                { name: 'PctIndNum', width: 140, sortable: false, hidden: true },
                {
                    name: 'PctLettSubject',
                    width: 140,
                    sortable: true,
                   // formatter: function (cellvalue, options, rowObject) {
                        //return (rowObject["PctViewDate"] == '' ? '<font size="3" color="#0072C6" style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
                    //}
                },
                { name: 'PctAssignSubject', width: 100, sortable: false, hidden: true },
                { name: 'PctAssignType', width: 100, sortable: false, hidden: true },
                { name: 'PctType', width: 100, sortable: false, hidden: true },
                { name: 'PctStartDate', width: 100, sortable: true, hidden: true },
                { name: 'PctRecDate', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignDate', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignTime', width: 100, sortable: true, hidden: true },
                { name: 'PctTabName', width: 100, sortable: true, hidden: true },
                { name: 'PctIndCode', width: 100, sortable: true, hidden: true },
                { name: 'PctViewDate', width: 100, sortable: true, hidden: true },
                { name: 'PctViewTime', width: 100, sortable: true, hidden: true },
                { name: 'SysCode', width: 100, sortable: true, hidden: true },
                { name: 'PctIsTerminate', width: 100, sortable: true, hidden: true },
                { name: 'PctIsConfirm', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignerSysNum', width: 100, sortable: true, hidden: true },
                { name: 'pctAssignmentNum', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignPrivate', width: 100, sortable: true, hidden: true },
                { name: 'PctIsInFolder', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignPhysics', width: 100, sortable: true, hidden: true },
                { name: 'PctConfirmRecLettPhysics', width: 100, sortable: true, hidden: true },
                { name: 'pctAssignmentPhysicsNum', width: 100, sortable: true, hidden: true },
                { name: 'PctDeputyEOSysNum', width: 100, sortable: true, hidden: true },
                { name: 'PctDeputySysCode', width: 100, sortable: true, hidden: true },
                { name: 'PctRequestStatus', width: 100, sortable: true, hidden: true },
                { name: 'PctIsTerminateByAssign', width: 100, sortable: true, hidden: true },
                { name: 'PctPosSysCode', width: 100, sortable: true, hidden: true },
                { name: 'PctAssignerPosSysCode', width: 100, sortable: true, hidden: true },
                { name: 'PctTabName1', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessAssignLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessContentLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessAttachLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessCCLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessPhysicsLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessFoldersLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessDocRelatedLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessTreeLetter', width: 100, sortable: true, hidden: true },
                { name: 'HasAccessEmailLetter', width: 100, sortable: true, hidden: true },
                { name: 'AssignedPerson', width: 100, sortable: true, hidden: true }
            ],
            rowNum: 20,
            loadonce: true,
            rowList: [5, 10, 20],
            recordpos: "left",
            ignoreCase: true,
            toppager: true,
            viewrecords: true,
            multiselect: true,
            sortorder: "desc",
            scrollOffset: 1,
            editurl: 'clientArray',
          multiboxonly: true,
            jsonReader:
            {
                repeatitems: false,
            },
            gridview: true,
            rowattr: function (rd) {

                return { "class": (rd["PctViewDate"] == '') ? "myRowClassNoRead" : "myRowClass" };

            },
            ondblClickRow: function (id) {

                $(this).jqGrid('editRow', id, true, null, null, 'clientArray');
            },
            onSelectRow: function (id) {
                rowData = jQuery(this).getRowData(id);
                window.selectedRow = id,
                doShowInformationOfSelectedRow(rowData, window.activeTab);
                if (id && id !== lastSel) {
                    if (typeof lastSel !== "undefined") {
                        $(this).jqGrid('restoreRow', lastSel);
                    }
                    lastSel = id;
                }
            },
            beforeSelectRow: function(rowid, e) {
                var cbsdis = $("tr#" + rowid + ".jqgrow > td > input.cbox:disabled", grid);
                if (cbsdis.length === 0) {
                i = grid.getCellIndex($(e.target).closest('td')[0]),
                cm = grid.jqGrid('getGridParam', 'colModel');
                return (cm[i].name === 'cb');
                    return true;    // allow select the row
                } else {
                    return false;   // not allow select the row
                }

            },
            onSelectAll: function(aRowids, status) {
                if (status) {
                    // uncheck "protected" rows
                    var cbs = $("tr.jqgrow > td > input.cbox:disabled", grid[0]);
                    cbs.removeAttr("checked");

                    //modify the selarrrow parameter
                    //grid[0].p.selarrrow = grid.find("tr.jqgrow:has(td > input.cbox:checked)")
                        //.map(function() { return this.id; }) // convert to set of ids
                        //.get(); // convert to instance of Array
                }
            },

            loadComplete: function () {

                $('#navGridfrom').datepicker({
                    isRTL: true,
                    onSelect: function (dateText, inst) {
                        $('#navGridto').datepicker('option', 'minDate', new JalaliDate(inst['selectedYear'], inst['selectedMonth'], inst['selectedDay']));
                    }
                });
                $("#navGridto").datepicker();
                var iCol = getColumnIndexByName(grid, 'act');
                var iColhasAccessAssignLetterIndex = getColumnIndexByName(grid, 'HasAccessAssignLetter');
                var iColhasAccessFoldersLetterIndex = getColumnIndexByName(grid, 'HasAccessFoldersLetter');
                $(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
                    .each(function () {
                        var valueAccessAssignLetter = this.parentElement.cells[iColhasAccessAssignLetterIndex].innerHTML;
                        var valueAccessFoldersLetter = this.parentElement.cells[iColhasAccessFoldersLetterIndex].innerHTML;
                        $(this.parentElement).find("td > input.cbox").attr("disabled",(valueAccessFoldersLetter=="False"? true:false));
                        $("<div>", {
                                title: "Archive",
                                mouseover: function () {
                                    $(this).addClass(valueAccessFoldersLetter == "True" ? 'ui-state-hover':'');
                                },
                                mouseout: function () {
                                    $(this).removeClass('ui-state-hover');
                                },
                                click: function (e) {
                                    if (valueAccessFoldersLetter == "True") {
                                        alert("'Custom' button is clicked in the rowis=" +
                                            $(e.target).closest("tr.jqgrow").attr("id") + " !");
                                    }
                                }
                            }
                        ).css({ "margin-right": "5px", "float": "left", "cursor": "pointer" })
                            .addClass(valueAccessFoldersLetter == "True" ? "ui-pg-div ui-inline-custom":"")
                            .append(valueAccessFoldersLetter == "True" ? '<span class="ui-icon icon-archive "></span>' : '<span class="ui-icon icon-archive ui-state-disabled">')
                            .prependTo($(this).children("div"));

                        $("<div>", {
                                title: "Assign",
                                mouseover: function () {
                                    $(this).addClass(valueAccessAssignLetter == "True" ?'ui-state-hover':'');
                                },
                                mouseout: function () {
                                    $(this).removeClass(valueAccessAssignLetter == "True" ?'ui-state-hover':'');
                                },
                                click: function(e) {
                                    if (valueAccessAssignLetter == "True") {
                                        alert("'Custom' button is clicked in the rowis=" +
                                            $(e.target).closest("tr.jqgrow").attr("id") + " !");
                                    }
                                }                                    
                            }
                        ).css({ "margin-right": "10px", "float": "left", cursor: "pointer" })
                            //.addClass("ui-pg-div ui-inline-custom")
                            .append(valueAccessAssignLetter == "True" ? '<span  class="ui-icon icon-refrence" disabled></span>' : '<span class="ui-icon icon-refrence ui-state-disabled"></span>')
                            .prependTo($(this).children("div"));
                    });
                $("tr.jqgrow", this).contextMenu('myMenu1', {
                    direction: 'rtl',
                    bindings: {
                        'edit': function (trigger) {
                            // trigger is the DOM element ("tr.jqgrow") which are triggered
                            grid.editGridRow(trigger.id, editSettings);
                        },
                        'add': function (/*trigger*/) {
                            grid.editGridRow("new", addSettings);
                        },
                        'del': function (trigger) {
                            if ($('#del').hasClass('ui-state-disabled') === false) {
                                // disabled item can do be choosed
                                grid.delGridRow(trigger.id, delSettings);
                            }
                        }
                    },
                    onContextMenu: function (event/*, menu*/) {
                        var rowId = $(event.target).closest("tr.jqgrow").attr("id");
                        //grid.setSelection(rowId);
                        // disable menu for rows with even rowids
                        $('#del').attr("disabled", Number(rowId) % 2 === 0);
                        if (Number(rowId) % 2 === 0) {
                            $('#del').attr("disabled", "disabled").addClass('ui-state-disabled');
                        } else {
                            $('#del').removeAttr("disabled").removeClass('ui-state-disabled');
                        }
                        return true;
                    }
                });
            },
4

1 に答える 1

3

要件

クリックして行を選択してデータを表示したいのですが、チェックボックスセットはボックスをクリックするだけです

multiselect: truejqGridのオプションの意味と矛盾します。選択の動作を変更できます。たとえば、複数選択チェックボックスのみをクリックして行を選択できます。あなたが望むのは、複数選択チェックボックスをチェックせずに行を選択することです。要件がオプションの意味と矛盾していmultiselect: trueます。

カスタム アルゴリズムに基づいてチェックされるチェックボックスがグリッドに必要な場合は、 を使用して列を含めることができますformatter: "checkbox", formatoptions: { disabled: false }

onSelectRowコールバック内のコールバックからコードを移動することをお勧めしbeforeSelectRowます。

さらに、使用する隠し列の数を減らすことをお勧めします。私が正しく計算した場合、グリッドには 40 (!!!) 非表示の列があり、表示される列は 8 つだけです。すべての非表示の列はページの DOM で発生し、グリッドの操作が遅くなります。必要なのは、行を表すすべてのプロパティを持つオブジェクトを持つことだけです。JavaScript 変数の使用は、隠し列の使用などの目的で非常に迅速に行われます。これはさまざまな方法で行うことができます。たとえば、 answer のようにほぼ同じ方法で項目を表す完全なデータでuserdata内部を埋めることができます。beforeProcessing

UPDATED : たとえば、使用jsonReader: { repeatitems: false }していて、列syscodeにデータの一意の ID が含まれている場合は、

  1. プロパティを列key: trueの定義に含めるか、 を使用します。両方作ることをお勧めします。syscodejsonReader: { repeatitems: false, id: "syscode" }
  2. サーバー応答にプロパティを入力するbeforeProcessingコールバックを含めます。userdata例えば
beforeProcessing: function (data) {
    var rows = data.rows, l = rows.length, i, item, itemBySysCode = {};
    for (i = 0; i < l; i++) {
        item = rows[i];
        if (item.syscode) {
            itemBySysCode[item.syscode] = item;
        }
    }
    data.userdata = itemBySysCode;
}

colModelこれで、およびからすべての非表示の行を削除することができますcolNames完全なアイテム オブジェクトが必要な場合は、getRowData今はメソッドを使用しないでください( jQuery(this).getRowData(id))。非表示でないプロパティのみを取得するために使用できるメソッド。非表示のプロパティにアクセスするには、 を使用できます$(this).jqGrid("getGridParam", "userData")[id]。この場合、サーバーからロードされた元のデータuserDataを取得するか、変更後に現在のデータを取得します (コードにはデータのローカル編集が含まれています)。jQuery(this).getRowData(id)$(this).jqGrid("getGridParam", "data")

于 2013-06-11T10:03:15.967 に答える