2015-07-24 9 views
10

Quando si utilizza Handsontable, sembra difficile recuperare l'intestazione di una riga da un menu contestuale.Recupero di un colpo di testa nascosta all'interno di un'istanza handsontable ordinato

consideri il seguente origine dati:

var data = function() { 
return [["1212", "roman", "i", "ii", "iii"], 
     ["3121", "numeric", 1, 2 ,3], 
     ["4126", "alpha", 'a', 'b', 'c']]; 
}; 

È possibile creare un'istanza Handsontable che visualizza tutti i dati, ma i primi due "colonne", e che ha un menù contestuale come segue:

// Settings to display all columns but the first two 
var dataCols = [] 
for(var i=2; i<data()[0].length; i++) { 
    dataCols.push({ data: i }) 
} 

// Instance creation 
var hot = new Handsontable(container, { 
    data: data(), 
    height: 396, 
    colHeaders: true, 
    rowHeaders: false, 
    columns: dataCols, 
    stretchH: 'all', 
    columnSorting: true, 
    contextMenu: { 
    callback: function(key, options) { 
     switch(key) { 
     case 'header_pls': 
     // TODO retrieve the "hidden header" from here  
     break; 
     } 
    }, 
    items: { 
     "header_pls": { 
     name: "Header please?" 
     } 
    } 
    }, 
}); 

il options parametro dal callback menù contestuale è fatto di due oggetti, start e end, entrambe aventi e una proprietà rowcol.

Manteniamolo semplice e presupponiamo che ci sarà sempre una singola cella selezionata: start e end sono lo stesso oggetto.

È quindi possibile recuperare l'intestazione dall'origine dati (e non i dati associati all'istanza) utilizzando il metodo di Handsontable getSourceDataAtRow.

Questo potrebbe fare il trucco, ma quando la tabella è stata ordinata facendo clic sull'intestazione di una colonna, il numero di riga dall'origine dati ei dati associati all'istanza non sono più gli stessi.

Here is an example che mostra qual è il problema.

È impossibile recuperare uno dei primi due elementi di una riga dopo aver ordinato la tabella.

Mi sono perso qualcosa?

risposta

3

Credo che il tuo problema è bollito giù a come ottenere il vero indice (fisico) dopo la cernita. Per favore correggimi se sbaglio perché questa risposta ruota intorno a questo.

Ecco cosa è necessario sapere: quando si utilizza il costruito nel sorter, Handson in realtà non sorta l'array di dati. Questo è un comportamento predefinito che potrebbe essere o non essere utile per te. In ogni caso, da quel momento in poi ogni metodo interno usa quello che viene chiamato un "indice logico" che è solo il nuovo indice ordinato. I metodi interni quindi utilizzano una conversione dall'indice logico a fisico quando si tenta di accedere a un punto dati.

Nel tuo caso, che ci si vuole recuperare l'indice fisico dato l'indice logico in modo che sia possibile accedere correttamente i dati.Questo può essere fatto utilizzando una semplice funzione:

physicalIndex = instance.sortIndex[logicalIndex][0]; 

Date queste informazioni si dovrebbe essere in grado di aggiungere un po 'di logica in modo che ogni volta che si tenta di accedere ai dati, basta assicurarsi di utilizzare questo indice fisico trasformato; nel mio caso, mi limito a controllare che instance.sortIndex non sia indefinito (cosa che penso sia il caso prima dell'ordinamento) e ogni altra volta assegni questo indice anche senza l'ordinamento, logicalIndex == physicalIndex.

Spero che questo aiuti!

+0

Totalmente quello che mi serviva, grazie. Ecco un [aggiornato jsFiddle con la soluzione] (http://jsfiddle.net/upc4mcd0/6/) per le persone interessate alla soluzione. –

1

ho trovato che è possibile utilizzare un renderizzatore personalizzato per nascondere le celle.

function customRenderer(instance, td, row, col) { 
    Handsontable.renderers.TextRenderer.apply(this, arguments); 
    if([0, 1].indexOf(col) > -1) { 
     td.style.display = "none"; 
    } 
    return td; 
} 

Con questo si può ottenere i dati delle colonne nascoste con getDataAtCell perché si utilizza l'origine dati originale nella tabella visualizzata. Ecco il violino aggiornamento: https://jsfiddle.net/xartok/upc4mcd0/5/

c'è un altro problema, però, con le intestazioni delle colonne ...

+0

Grazie per l'aiuto. Questo sarebbe il trucco se non ci fosse un problema con le intestazioni. Nel mio progetto "nella vita reale" ogni colonna non ha la stessa larghezza (utilizzo intestazioni personalizzate). Sono abbastanza sicuro che questo rovinerebbe tutto il foglio! –

+1

sì, sarebbe, dovresti usare indie logiche – ZekeDroid