jqgrid multiselect solo utilizzare la casella di selezione multipla

Voglio selezione della riga utilizzando solo selezionare la casella di non fare clic sulla riga.Ho letto questa risposta ma onSelectRow non licenziato.Nella mia applicazione quando si fa clic sulla riga,alcuni dati mostrano(master e dettagli struct)
ma perché onSelectRow non licenziato.
Voglio selezionare una riga e fare clic su mostra dati, ma la casella di controllo imposta solo fare clic sulla casella.Please help me 🙁

 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;
                    }
                });
            },
  • Il mio vecchia risposta che si fa riferimento utilizza beforeSelectRow invece di onSelectRow. È beforeSelectRow non licenziato in griglia? Potrebbe fornire un codice che descrivono il problema?
  • Grazie per la pronta risposta :).beforeSelectRow è il fuoco, ma onSelectRow non il fuoco.in onSelectRow mostra dati di base sulla riga selecected.Posso modificare la mia domanda e aggiungere un po ‘ di codice
  • Se beforeSelectRow termina con return false quindi non c’è una selezione della riga di prendere posto e onSelectRow non il fuoco. Inoltre non vedo il motivo è necessario utilizzare entrambi i beforeSelectRow e onSelectRow.
  • Io uso onSelectRow per la mostra dati di base sulla riga selezionata e utilizzare beforeSelectRow per quando alcuni di righe non dovrebbe selezionare da multielect box(disabilitare multielect casella della riga di base, a condizione)
  • Per disattivare la di multiselect casella di utilizzare la tua risposta
  • Non riesco ancora a capire perché non è possibile spostare il codice onSelectRow all’interno di beforeSelectRow? Attuale codice mi sembra strano a causa di molte ragioni. Per esempio loadComplete contiene il codice che fare qualcosa in colonne act e iCol2 che non sono definite in colModel, si imposta il valore booleano "disabled" attributo invece di impostare la stringa di "disabled". Si esamina HTML codice di colonna e non è chiaro come il codice di venire in griglia. Se si inserisce frammenti HTML in una griglia di dati alcuni seleziona di righe non è stato fatto.
  • risposta è di più di 2 anni. Ho fissato il valore di "disabled" attributo nella risposta. Altre mie domande sono ancora aperte. Penso che si dovrebbe utilizzare meglio beforeSelectRow invece di onSelectRow nel tuo caso.
  • Scusa,ho messo il codice breve modifico la mia domanda

InformationsquelleAutor ZSH | 2013-06-11



One Reply
  1. 3

    Il requisito

    Voglio selezionare una riga e fare clic su mostra dati, ma la casella di controllo imposta solo fare clic sulla casella di

    in contraddizione con il significato di multiselect: true opzione jqGrid. È possibile modificare il comportamento di selezione. Per esempio, è possibile selezionare le righe, fare clic su multiselect casella di controllo solo. Quello che vuoi è selezione di righe senza controllare multiselect casella di controllo. Il requisito in contraddizione con il significato di multiselect: true opzione.

    Se avete bisogno di qualche chechboxes nella griglia che sarà verificata sulla base personalizzata algoritmo è possibile includere colonna con formatter: "checkbox", formatoptions: { disabled: false }.

    Ti consiglio di spostare il codice dal tuo onSelectRow richiamata all’interno di beforeSelectRow richiamata.

    Inoltre ti consiglierei di ridurre il numero di colonne nascoste che si utilizza. Ho calcolato correttamente hai 40 (!!!) le colonne nascoste e solo 8 colonne visibili nella griglia. Ogni colonna nascosta svolgerà il DOM della pagina e rende il lavoro con la griglia lentamente. Di che cosa avete bisogno è solo di avere un oggetto con tutte le proprietà che rappresentano la riga. Utilizzo di JavaScript le variabili è molto rapidamente a questo scopo l’utilizzo di colonne nascoste. Si può fare questo in modo molti. Per esempio si può riempire userdata all’interno di beforeProcessing con i dati completi, che rappresentano gli elementi nello stesso modo come in la risposta.

    AGGIORNATO: Se ad esempio si utilizza jsonReader: { repeatitems: false } e la colonna syscode contiene un id univoco di dati, allora si dovrebbe

    1. includono key: true proprietà nella definizione del syscode colonna o utilizzare jsonReader: { repeatitems: false, id: "syscode" }. Vi consiglio di fare entrambi.
    2. includono beforeProcessing di callback che riempiono userdata proprietà in la risposta del server. Per esempio
    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;
    }

    Ora è possibile accedere a rimuovere tutte le righe nascoste da colModel e colNames. Se avete bisogno di piena oggetto si dovrebbe non utilizzare getRowData metodo ora (jQuery(this).getRowData(id)). Il metodo che si potrebbe utilizzare per ottenere non di proprietà nascoste solo. Per accedere nascosti proprietà che è possibile utilizzare $(this).jqGrid("getGridParam", "userData")[id]. Nel caso userData ti dati originali caricato dal server e jQuery(this).getRowData(id) o $(this).jqGrid("getGridParam", "data") saranno mostrati anche dati aggiornati dopo la modifica (il codice contiene locale di modifica dei dati).

    • Per ridurre il numero di colonne nascoste posso rimuovere colonne e utilizzare beforeProcessing (secondo esempio) per salvare i dati in JavaScript le variabili(per esempio userdata).Non ho capito bene?
    • Esattamente! Avrete la griglia con 8 colonne solo e usare qualcosa come jQuery(this).getGridParam("userData")[id] invece di jQuery(this).getRowData(id). Volevo postarvi il codice di esempio, ma non era chiaro come si specifica id dei dati. Non utilizzare key: true per qualche colonna. Avete ulteriori id proprietà in ogni elemento di dati restituiti dal server? Si potrebbe includere un esempio di dati (2 righe) restituito dal server?
    • La colonna ‘syscode’ è la chiave e utilizzare la chiave di default(numero di riga).Ho impostato la chiave vera per syscode.Mi riempi ‘userData’ e jQuery(this).getGridParam(“userData”) il suo lavoro, ma jQuery(this).getRowData(id) non funziona più ho anche aggiungere syscode in userData
    • Vedere AGGIORNAMENTO parte della risposta per il codice di esempio.
    • Grazie mille :D. saperne di più sulla jqgrid dalla tua risposta.
    • Sei il benvenuto!

Lascia un commento