1

我只想使用多选框而不是通过单击行来选择行。我阅读了这个答案,但没有触发 onSelectRow。在我的应用程序中单击行时,一些数据显示(主结构和详细信息结构),但因为 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: true与jqGrid中 option 的含义相矛盾。您可以更改选择的行为。例如,您只能通过单击多选复选框来选择行。您想要的是选择行而不检查多选复选框。该要求与选项的含义相矛盾multiselect: true

如果您需要网格中的一些复选框,这些复选框将根据您的自定义算法进行检查,您可以包含带有formatter: "checkbox", formatoptions: { disabled: false }.

我建议您将代码从onSelectRow回调中移动到beforeSelectRow回调中。

此外,我建议您减少使用的隐藏列的数量。我计算正确,您在网格中有 40 个(!!!)隐藏列和只有 8 个可见列。每个隐藏的列都发生在页面的 DOM 上,并且使网格的工作变得缓慢。您需要的只是拥有代表该行的所有属性的对象。与使用隐藏列一样,JavaScript 变量的使用要快得多。可以通过多种方式做到这一点。例如一个可以填写userdata用与答案beforeProcessing几乎相同的方式填充代表项目的完整数据。

更新:例如,如果您使用jsonReader: { repeatitems: false }并且该列syscode包含您数据的唯一 ID,那么您应该

  1. 包括key: true属性syscode或使用jsonReader: { 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 回答