È possibile filtrare i dati in un dgrid come è possibile in un datagrid? Se é cosi, come?

Question

Sono relativamente nuovo al dojo e ho visto come datagrid offre una funzionalità di filtro dinamico che riduce le righe visibili in base a ciò che digiti in un input di testo del filtro. Non ho trovato alcun esempio su come farlo con il dgrid. Se può essere fatto, si prega di fornire un esempio o indicarmi una risorsa che offre un tutorial o un esempio. Grazie!

Answer 1

Sì, è possibile. Utilizzare dgrid/OnDemandGrid e definire la funzione query che restituirà true o false in base alla logica per ogni riga in dojo/store che alimenta la griglia.

ho preparato un esempio per giocare con a jsFiddle: http://jsfiddle.net/phusick/7gnFd/, quindi non c'è bisogno di spiegare troppo:

la funzione di query:

var filterQuery = function(item, index, items) { 
    var filterString = filter ? filter.get("value") + "" : ""; 

    // early exists 
    if (filterString.length < 2) return true; 
    if (!item.Name) return false; 

    // compare 
    var name = (item.Name + "").toLowerCase(); 
    if (~name.indexOf(filterString.toLowerCase())) { return true;} 

    return false; 
}; 

The Grid :

var grid = new Grid({ 
    store: store, 
    query: filterQuery, // <== the query function for filtering 
    columns: { 
     Name: "Name", 
     Year: "Year", 
     Artist: "Artist", 
     Album: "Album", 
     Genre: "Genre" 
    } 
}, "grid"); 

Answer 2

So che questa non è la risposta alla domanda posta e la risposta fornita è magistrale e la usiamo abbastanza.

Tuttavia, questa funzionalità non sembra funzionare bene se si utilizza una TreeGrid (colonne con il plugin "dgrid/tree"). Ho scritto del codice per simulare lo stesso comportamento della risposta accettata con una griglia ad albero. Fondamentalmente si tratta solo di scorrere gli articoli nel negozio e nascondere tutti gli elementi di riga che non corrispondono a nessuna condizione stabilita. Ho pensato di condividerlo nel caso in cui aiuti qualcuno. È piuttosto brutto e sono sicuro che può essere migliorato, ma funziona.

In pratica utilizza lo stesso concetto della risposta di phusick. Hai bisogno di guardare un valore su un TextBox, ma invece di aggiornare la griglia di gioco è fatto chiamare una funzione:

textBox.watch("value", lang.hitch(this, function() { 
         if (timeoutId) { 
          clearTimeout(timeoutId); 
          timeoutId = null; 
         }; 

         timeoutId = setTimeout(lang.hitch(this, function() { 
          this.filterGridByName(textBox.get('value'), myGrid); 
         }, 300)); 
        })); 

Ed ecco la funzione:

filterGridByName: function(name, grid){ 
       try { 
         for (var j in grid.store.data){ 
          var dataItem = grid.store.data[j]; 
          var childrenLength = dataItem.children.length; 
          var childrenHiddenCount = 0; 
          var parentRow = grid.row(dataItem.id); 
          for (var k in dataItem.children){ 

           var row = grid.row(dataItem.children[k].id); 
           var found = false; 
           if (dataItem.children[k].name.toLowerCase().indexOf(name.toLowerCase()) != -1){ 
            found = true; 
           } 
           if (found){ 
            if (row.element){ 
             domStyle.set(row.element, "display", "block"); 
            } 
            if (parentRow.element){ 
             domStyle.set(parentRow.element, "display", "block"); 
            } 
           } else { 
            childrenHiddenCount++; 
            // programmatically uncheck any hidden item so hidden items 
            for (var m in grid.dirty){ 
             if (m === dataItem.children[k].id && grid.dirty[m].selected){ 
              grid.dirty[m].selected = false; 
             } 
            } 
            if (row.element){ 
             domStyle.set(row.element, "display", "none"); 
            } 
           } 
          } 
          // if all of the children were hidden, hide the parent too 

          if (childrenLength === childrenHiddenCount){ 
           domStyle.set(parentRow.element, "display", "none"); 
          } 
         } 
       } catch (err){ 
        console.info("error: ", err); 
       } 
      }