dojo - referencia - ¿Es posible filtrar datos en una cuadrícula como lo hace en una cuadrícula de datos? ¿Si es así, cómo?

cuadricula

Question

Soy relativamente nuevo en Dojo y he visto cómo DataGrid ofrece una capacidad de filtrado dinámico que reduce las filas visibles en función de 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é 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. Necesita ver un valor en un TextBox, pero en lugar de actualizar la cuadrícula, debe 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);
                }
            }

Answer 2

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

Preparé un ejemplo para jugar en jsFiddle: http://jsfiddle.net/phusick/7gnFd/ , así que no tengo 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");