¿Es posible filtrar datos en una cuadrícula como se puede en una cuadrícula de datos? ¿Si es así, cómo?

Question

Soy relativamente nuevo en dojo y he visto cómo datagrid ofrece una capacidad de filtrado dinámico que reduce las filas visibles según lo que escribe en una entrada de texto de filtro. No he encontrado ningún ejemplo de cómo hacerlo con dgrid. Si se puede hacer, proporcione un ejemplo o apúnteme a un recurso que ofrezca un tutorial o un ejemplo. ¡Gracias!

Answer 1

Sí, es posible. Utilice dgrid/OnDemandGrid y defina la función query que devolverá true o false en función de su lógica para cada fila en dojo/store que alimenta la red.

I preparado un ejemplo para jugar con en jsFiddle: http://jsfiddle.net/phusick/7gnFd/, por lo que no tiene que explicar demasiado:

la función de consulta:

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; 
}; 

La cuadrícula :

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

Sé que esta no es la respuesta a la pregunta, y la respuesta proporcionada es magistral y la usamos bastante.

Sin embargo, esta funcionalidad no parece funcionar bien si está utilizando un TreeGrid (columnas con el complemento "dgrid/tree"). He escrito un código para simular el mismo comportamiento que la respuesta aceptada con una cuadrícula de árbol. Básicamente se trata de recorrer los elementos de la tienda y ocultar todos los elementos de la fila que no coincidan con la condición que establezcas. Pensé que podría compartirlo en caso de que ayude a alguien. Es bastante feo y estoy seguro de que se puede mejorar, pero funciona.

Básicamente utiliza el mismo concepto que la respuesta de phusick. Es necesario tener cuidado un valor en un cuadro de texto, pero en lugar de la actualización de la rejilla tiene que llamar a una función:

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)); 
        })); 

y aquí está la función:

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); 
       } 
      }