Jqgrid multiselect использует только поле множественного выбора

Я хочу выбрать строку только с помощью поля множественного выбора, а не щелчком по строке. Я прочитал этот ответ, но 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;
                    }
                });
            },

ZSH 11.06.2013 источник

comment

В моем старом ответе, на который вы ссылались, используется beforeSelectRow вместо onSelectRow. beforeSelectRow не срабатывает в вашей сети? Не могли бы вы предоставить код, демонстрирующий проблему? - Oleg 11.06.2013

comment

Спасибо за ваш быстрый ответ :).beforeSelectRow срабатывает, но onSelectRow не срабатывает.in onSelectRow показывает базу данных в выбранной строке. Я редактирую свой вопрос и добавляю код - ZSH 11.06.2013

comment

Если beforeSelectRow заканчивается на return false, то выбор строки не происходит и onSelectRow не срабатывает. Более того, я не понимаю, почему вам нужно использовать как beforeSelectRow, так и onSelectRow. - Oleg 11.06.2013

comment

Я использую onSelectRow для отображения базы данных в выбранной строке и использую beforeSelectRow, когда некоторые строки не должны выбираться с помощью поля множественного выбора (отключить поле множественного выбора базы строк при условии) - ZSH 11.06.2013

comment

Для отключения поля множественного выбора я использую ваш ответ - ZSH 11.06.2013

comment

Я до сих пор не понимаю, почему нельзя переместить код onSelectRow внутрь beforeSelectRow? Ваш текущий код кажется мне странным по многим причинам. Например, loadComplete содержит код, который делает что-то в столбцах act и iCol2, которые не определены в colModel, вы устанавливаете логическое значение атрибута "disabled" вместо установки строки "disabled". Вы изучаете HTML код столбца, и неясно, как этот код попадает в сетку. Если вы поместите фрагменты HTML в данные сетки, некоторые выборки строк не будут выполнены. - Oleg 11.06.2013

comment

Ответу больше двух лет. Я исправил значение атрибута "disabled" в ответе. Другие мои вопросы остаются открытыми. Я думаю, что вам лучше использовать beforeSelectRow вместо onSelectRow в вашем случае. - Oleg 11.06.2013

comment

Извините, я поставил короткий код, я снова редактирую свой вопрос - ZSH 11.06.2013

Ответы (1)

arrow_upward
3
arrow_downward

Требование

Я хочу выбрать строку щелчком и показать данные, но флажок установлен, только щелкнуть по полю

противоречит значению параметра multiselect: true в jqGrid. Вы можете изменить поведение выбора. Например, вы можете выбрать строки, щелкнув только флажок множественного выбора. Что вам нужно, так это выбор строк без установки флажка множественного выбора. Требование противоречит смыслу опции multiselect: true.

Если вам нужно несколько чекбоксов в вашей сетке, которые будут проверяться на основе вашего пользовательского алгоритма, вы можете включить столбец с formatter: "checkbox", formatoptions: { disabled: false }.

Я рекомендую вам переместить код из обратного вызова onSelectRow внутрь обратного вызова beforeSelectRow.

Кроме того, я бы порекомендовал вам уменьшить количество используемых вами скрытых столбцов. Я правильно подсчитал, что у вас 40 (!!!) скрытых столбцов и только 8 видимых столбцов в сетке. Каждый скрытый столбец занимает место в DOM страницы и замедляет работу с сеткой. Вам нужно просто иметь объект со всеми свойствами, которые представляют строку. Использование переменных JavaScript намного быстрее, чем использование скрытых столбцов. Это можно сделать разными способами. Например, можно заполнить userdata внутри beforeProcessing полными данными, которые представляют элементы почти так же, как в ответе.

ОБНОВЛЕНО: если, например, вы используете jsonReader: { repeatitems: false }, а столбец syscode содержит уникальный идентификатор ваших данных, вам следует

включите свойство key: true в определение столбца syscode или используйте jsonReader: { repeatitems: false, id: "syscode" }. Рекомендую сделать оба.
включить обратный вызов 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") получите текущие данные после модификации (ваш код содержит локальное редактирование данных).

Oleg 11.06.2013

comment

Чтобы уменьшить количество скрытых столбцов, я могу удалить столбцы и использовать перед обработкой (согласно примеру) для сохранения данных в переменных JavaScript (например, пользовательских данных). Я правильно понимаю? - ZSH; 11.06.2013

comment

@ZSH: Точно! У вас будет сетка только с 8 столбцами и вы будете использовать что-то вроде jQuery(this).getGridParam("userData")[id] вместо jQuery(this).getRowData(id). Я хотел опубликовать вам пример кода, но было непонятно, как вы указываете id в своих данных. Вы не используете key: true для какого-то столбца. Есть ли у вас дополнительное свойство id в каждом элементе данных, возвращаемых с сервера? Не могли бы вы включить пример данных (2 строки), возвращенных с сервера? - Oleg; 11.06.2013

comment

Столбец «syscode» является ключевым, и я использую ключ по умолчанию (номер строки). Я установил для ключа значение true для syscode. Я заполняю «userData» и jQuery (this).getGridParam (userData) свою работу, но jQuery (this). ) не работает, я также добавляю системный код в userData - ZSH; 11.06.2013

comment

@ZSH: см. ОБНОВЛЕНО часть ответа для примера кода. - Oleg; 11.06.2013

Jqgrid multiselect использует только поле множественного выбора

Ответы (1)

Похожие вопросы