jqGrid Gruppo di Colonne

posso implementare un gruppo di colonne in jqGrid come jQuery EasyUI libreria?

Si può capire quello che intendo per andare jQuery EasyUI demo sito web e scegliere Datagrid quindi Gruppo di Colonne dal menu di sinistra.

Grazie per l’aiuto

OriginaleL’autore Lorenzo | 2011-09-07

3 risposte

  1. 10

    La tua domanda non è nuova. Molte volte la corrispondente richiesta di funzionalità è stato chiesto in trirand forum o su stackoverflow. Io do un’altra risposta sullo stretto domanda qualche tempo prima.

    Ora dopo la lettura della tua domanda, ho deciso di fare non rendono una perfetta soluzione a supporto di tutti jqGrid caratteristiche (troppo difficile). Invece di che ho deciso di creare una soluzione che può essere già utilizzato in molti casi, ma che ha alcune limitazioni.

    La demo mostra i miei primi risultati:

    jqGrid Gruppo di Colonne

    Restrizioni:

    • le colonne della griglia non può essere ridimensionata. Io uso la demo cmTemplate: {resizable: false} parametro per impostare resizable: false in tutte le colonne della griglia.
    • sortable: true non è supportato
    • showCol, hideCol o columnChooser non sono attualmente supportati, ma sono sicuro che si può rapidamente risolvere i problemi.
    • colonne su cui si potranno aggiungere ulteriori intestazione di colonna dovrebbe la stessa larghezza. Se le colonne sono diversi i valori di larghezza la larghezza totale della colonna sarà diviso tra le colonne automaticamente.

    Sull’altro lato tutto funziona senza alcun problema in tutte le mie prove con altre opzioni popolari come shrinkToFit: false, autowidth: true o la modifica della griglia larghezza rispetto di setGridWidth metodo (con o senza compressione).

    Ora prima circa l’utilizzo della funzione. Ho scritto la funzione insertColumnGroupHeader che io uso l’esempio di cui sopra, come

    insertColumnGroupHeader(grid, 'amount', 3, '<em>Information about the Price</em>');

    Inserisce un ulteriore intestazione di colonna con il frammento di HTML ‘Informazioni circa il Prezzo‘ su 3 colonne a partire dalla colonna ‘quantità’. Quindi l’utilizzo è abbastanza semplice. Ovviamente si può usare qualsiasi testo come ‘Informazioni su Prezzo e’ come intestazione della colonna aggiuntiva.

    La funzione insertColumnGroupHeader ha il seguente codice:

    var denySelectionOnDoubleClick = function ($el) {
            //see https://stackoverflow.com/questions/2132172/disable-text-highlighting-on-double-click-in-jquery/2132230#2132230
            if ($.browser.mozilla) {//Firefox
                $el.css('MozUserSelect', 'none');
            } else if ($.browser.msie) {//IE
                $el.bind('selectstart', function () {
                    return false;
                });
            } else {//Opera, etc.
                $el.mousedown(function () {
                    return false;
                });
            }
        },
        insertColumnGroupHeader = function (mygrid, startColumnName, numberOfColumns, titleText) {
            var i, cmi, skip = 0, $tr, colHeader, iCol, $th,
                colModel = mygrid[0].p.colModel,
                ths = mygrid[0].grid.headers,
                gview = mygrid.closest("div.ui-jqgrid-view"),
                thead = gview.find("table.ui-jqgrid-htable>thead");
    
            mygrid.prepend(thead);
            $tr = $("<tr>");
            for (i = 0; i < colModel.length; i++) {
                $th = $(ths[i].el);
                cmi = colModel[i];
                if (cmi.name !== startColumnName) {
                    if (skip === 0) {
                        $th.attr("rowspan", "2");
                    } else {
                        denySelectionOnDoubleClick($th);
                        $th.css({"padding-top": "2px", height: "19px"});
                        $tr.append(ths[i].el);
                        skip--;
                    }
                } else {
                    colHeader = $('<th class="ui-state-default ui-th-ltr" colspan="' + numberOfColumns +
                        '" style="height:19px;padding-top:1px;text-align:center" role="columnheader">' + titleText + '</th>');
                    denySelectionOnDoubleClick($th);
                    $th.before(colHeader);
                    $tr.append(ths[i].el);
                    skip = numberOfColumns - 1;
                }
            }
            mygrid.children("thead").append($tr[0]);
        };

    Inoltre, è stato necessario apportare alcune modifiche in jqGrid codice. Puoi scaricare la versione modificata (modifica della versione 4.1.2) di jquery.jqGrid.src.js da qui. Le modifiche sono costituiti da due blocchi. Prima ho cambiato il codice di sortData funzione, le linee Mille otto cento settanta quattroMille otto cento ottanta quattro

    var thd= $("thead:first",ts.grid.hDiv).get(0);
    $("tr th:eq("+ts.p.lastsort+") span.ui-grid-ico-sort",thd).addClass('ui-state-disabled');
    $("tr th:eq("+ts.p.lastsort+")",thd).attr("aria-selected","false");
    $("tr th:eq("+idxcol+") span.ui-icon-"+ts.p.sortorder,thd).removeClass('ui-state-disabled');
    $("tr th:eq("+idxcol+")",thd).attr("aria-selected","true");
    if(!ts.p.viewsortcols[0]) {
        if(ts.p.lastsort != idxcol) {
            $("tr th:eq("+ts.p.lastsort+") span.s-ico",thd).hide();
            $("tr th:eq("+idxcol+") span.s-ico",thd).show();
        }
    }

    il seguente:

    var previousSelectedTh = ts.grid.headers[ts.p.lastsort].el,
        newSelectedTh = ts.grid.headers[idxcol].el;
    $("span.ui-grid-ico-sort",previousSelectedTh).addClass('ui-state-disabled');
    $(previousSelectedTh).attr("aria-selected","false");
    $("span.ui-icon-"+ts.p.sortorder,newSelectedTh).removeClass('ui-state-disabled');
    $(newSelectedTh).attr("aria-selected","true");
    if(!ts.p.viewsortcols[0]) {
        if(ts.p.lastsort != idxcol) {
            $("span.s-ico",previousSelectedTh).hide();
            $("span.s-ico",newSelectedTh).show();
        }
    }

    Successivo ho definito getColumnHeaderIndex funzione come la seguente

    var getColumnHeaderIndex = function (th) {
        var i, headers = ts.grid.headers, ci = $.jgrid.getCellIndex(th);
        for (i = 0; i < headers.length; i++) {
            if (th === headers[i].el) {
                ci = i;
                break;
            }
        }
        return ci;
    };

    e cambiato le linee Due mila cento settanta due e Due mila cento ottanta cinque di grid.base.js da

    var ci = $.jgrid.getCellIndex(this);

    per

    var ci = getColumnHeaderIndex(this);

    È tutto. Le sopra descritte modifiche non dovrebbe avere alcuna influenza negativa sull’originale jqGrid codice e può essere utilizzato normalmente. Vorrei pubblicare il mio suggerimento, la prossima volta su trirand forum.

    AGGIORNATO: Un’altra versione della demo permette il ridimensionamento di tutte le colonne tranne le colonne avere le intestazioni. Nella versione tutte le colonne su cui si potranno aggiungere ulteriori intestazione di colonna devono avere la stessa larghezza. La larghezza delle colonne non diviso tra le colonne automaticamente. Devi impostare la stessa larghezza della colonna manualmente.

    UDPATED 2: voglio informare su alcuni progressi nella creazione di versione più avanzata di multiheader jqGrid. Prima wildraid postato molto interessante soluzione. Vedere il suo demo qui. A proposito, se uno usa il metodo jqGrid con le correzioni che ti ho suggerito (vedi sopra) il problema con l’ordinamento icone nella demo sarà risolto. Vedi qui la demo come la conformazione.

    Dopo che I lavori un po ‘ più di appoggiarsi a ridurre le restrizioni nel mio multicolonna approccio che uso rowSpan per aumentare l’altezza delle colonne. Ecco la mia attuale risultato intermedio: la nuova demo. La nuova demo funziona già molto bene in Internet Explorer 9/8, Firefox e Opera. Nel browser basati su Webkit (Google Chrome e Safari) ha ancora il sopra elencati restrizione (intestazioni di colonna che ha multiheaders avere la stessa dimensione e non ridimensionabile). La demo sembra buono, ha dei limiti e si guarda bene in Webkit browser web. Tuttavia si possono vedere i progressi nell’ordinamento.

    Ho intenzione di aumentare l’altezza della ridimensionabile area utilizzata per ridimensionare le colonne in base la demo da la risposta. Di causare l’utilizzo di molte intestazioni sopra le intestazioni di colonna sarà anche supportato. ColumnChooser o showCol/hideCol sarà supportato anche. Il più interessante per me, ora, è quello di trovare un modo chiaro di come implementare multirows intestazioni di colonna utilizzando rowSpan nel browser basati su Webkit (Google Chrome e Safari). Probabilmente qualcun altro troverà una soluzione? È il motivo principale per cui ho deciso di condividere non si è completata, i risultati qui.

    AGGIORNA 3: Le modifiche al codice di jqGrid sono inclusi (vedi qui) nel codice principale di jqGrid. Ho migliorato la soluzione che ho descritto qui per questo e questo demo. La seconda demo di aumentare la griglia larghezza se la larghezza della colonna sarà aumentato. Personalmente mi piace il comportamento.

    AGGIORNAMENTO 4: La prossima versione del demo si può vedere qui. Ha un’opzione boolean (il parametro useColSpanStyle) che definisce se colspan deve essere utilizzato o meno. Con false valore del parametro i risultati saranno il seguente.

    Questo ha funzionato per me!
    Sono contento di sentire questo! Il mio attuale demo non è perfetto, ma un passo alla soluzione. Perché hai la stessa domanda prima voglio informarvi circa la risposta.
    Infatti, ha funzionato perfettamente per me, anche se oggi Im solo usando il Rasoio e il rendering di Dati sintassi 🙂
    Wow! Non mi aspettavo fosse così difficile. Grande codice! Grazie Oleg, ha funzionato alla perfezione 🙂
    Come si può leggere in “UPDATE 3” parte ci sono alcuni progressi nel discusso argomento. Ora è chiaro che la prossima versione di jqGrid avrà il supporto di multiline intestazioni di colonna in alcuni modi. Continuerò ad informarvi su questo.

    OriginaleL’autore Oleg

  2. 0

    Correlati: jqGrid Raggruppamento Senza Subgrids?

    Per l’aspetto visivo solo, può essere che si può raggiungere questo obiettivo attraverso la modifica jqgrid di output html chiamando un metodo dopo il caricamento dei dati della griglia. Si può accedere ai intestazione di colonna “jqgh_” prefisso seguito dal colName valore di jgrid. Dopo una serie di elementi, è possibile modificarli.

    Non è il modo migliore ovviamente, ma potrebbe funzionare.

    OriginaleL’autore denolk

  3. 0

    Come le versioni successive di jqGrid, Oleg soluzione è diventata ufficiale 🙂

    Sto provando sulla v4.4.4, ma dovrebbe funzionare su tutti i 4.x

    E supporta l’ordinamento, anche se i documenti che dicono il contrario (che in realtà dovrebbe aggiornare le API ref)

    controllare il riferimento ufficiale qui

    non è la prima Oleg per ottenere ufficiali, si deve essere orgogliosi di mate!

    OriginaleL’autore Dariozzo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *