Filtrer par cases à cocher/lignes déjà sélectionnées

Question

J'ai une grille Slickgrid (dataView) remplie avec des données, un filtre rapide (exemple-header-row.html), des sélecteurs de ligne checkbox (exemple-checkbox-row-select.html) avec syncGridSelection (https://github.com/mleibman/SlickGrid/wiki/DataView#synchronizing-selection--cell-css-styles). Tout fonctionne bien.

Par défaut, les filtres rapides placent une zone de saisie dans la colonne de la case à cocher. Ce serait bien si l'on pouvait filtrer par cases à cocher (lignes) déjà sélectionné, mais je ne pense pas que le texte d'entrée est possible pour le filtrage? Donc, à la place, j'ai désactivé l'entrée du filtre uniquement dans la colonne de la case à cocher et je l'ai replacé avec un bouton bascule que j'espère pouvoir filtrer par cases à cocher/lignes déjà sélectionnées.

J'ai vu du code avec grid.getSelectedRows() mais je ne sais pas comment l'utiliser dans le DataView, en particulier avec la fonction syncGridSelection.

Mon but est de basculer/filtrer les cases cochées et désactivées dans la grille dataView pour les visualiser. Suggestion de code, des exemples seraient très appréciés.

---

Peut-être que je dois décrire ce que je cherche différemment. Disons que j'ai 10 000 lignes de données dans ma grille. Un utilisateur final sélectionne la case à cocher/numéro de ligne 1, le numéro de ligne 450 et le numéro de ligne 999. Une fois la sélection des lignes terminée, ils voudront probablement vérifier quelles lignes ils ont sélectionnées. Au lieu de faire défiler les 10 000 enregistrements pour voir ce qu'ils ont sélectionné, il serait bon de filtrer sur les lignes qu'ils ont déjà sélectionnées. Une fois filtrée, la grille ne montrerait que 3 lignes, les lignes 1, 450 et 999. Lorsque le filtre est supprimé, tous les 10 000 enregistrements s'afficheront.

J'ai abordé ce problème au niveau du filtre mais j'ai du mal à le faire. Utilisation d'un filtre basé sur du texte: Le premier exemple ci-dessous serait la lecture de l'enfant et la vérification de sa vérification.

Le deuxième exemple ci-dessous vérifie si "this" numéro de ligne est dans le tableau de grid.getSelectedRows(). Le problème avec la deuxième approche est que je ne suis pas sûr de savoir comment obtenir le numéro de ligne actuel que nous vérifions.

Une suggestion sur le code ci-dessous?

function filter(item) { 
for (var columnId in columnFilters) { 
    if (columnId !== undefined && columnId != "_checkbox_selector" && columnFilters[columnId] !== "") { 
    var c = grid.getColumns()[grid.getColumnIndex(columnId)]; 
    if (item[c.field] != columnFilters[columnId]) { 
     return false; 
    }    
    } else if (columnId == "_checkbox_selector") { 
     /* something like.... 
     if input checkbox is NOT checked 
     return false; 
     */ 
    }  
} 
return true; 
} 

- OU -

function filter(item) { 
var rows = grid.getSelectedRows(); 
for (var columnId in columnFilters) { 
    if (columnId !== undefined && columnId != "_checkbox_selector" && columnFilters[columnId] !== "") { 
    var c = grid.getColumns()[grid.getColumnIndex(columnId)]; 
    if (item[c.field] != columnFilters[columnId]) { 
     return false; 
    }    
    } else if (columnId == "_checkbox_selector") { 
    /* something like.... 
    var isFound = rows.indexOf(this.row); 
    if (isFound == -1) { 
     return false; 
    } 
    */ 
    }  
} 
return true; 
}   

Answer 1

Voici comment j'ai résolu le problème. Peut-être pas la meilleure solution, mais cela fonctionne. Après avoir suivi les exemples SlickGrid mentionnés dans le premier paragraphe de cet article, je crée mes objets de données en appelant une fonction setData et en transmettant mes valeurs.La valeur de rowIndex est un compteur en commençant par 0 pour le premier objet, 1 pour le second objet, etc.

var setData = function(rowIndex, fieldOne, fieldTwo) { 
    var d = (data[rowIndex] = {});   
    d["id"] = rowIndex; 
    d["c0"] = fieldOne; 
    d["c1"] = fieldTwo;   
} 

I puis changé le filtre par défaut à l'aide du code ci-dessous. Désormais, tout type de caractère dans le champ de saisie du filtre de case à cocher affichera uniquement les lignes sélectionnées dans la grille dataView. Une fois le personnage supprimé, toutes les lignes sélectionnées ou non seront affichées. Probablement pas le plus intuitif pour l'utilisateur final, mais fonctionne. Personnellement, je vais changer le champ de saisie du filtre de case à cocher avec une icône de police comme un drapeau (solide pour sur et souligné pour désactiver) qui va basculer les cases sélectionnées case à cocher.

Answer 2

Si je vous comprends bien, vous demandez en un typé fonction de filtre. Cela a besoin d'être fait pendant un moment. L'approche la plus simple consisterait à ajouter une propriété 'filterAsType' à chaque colonne, puis à ajouter du code à la fonction de gestion d'en-tête de filtre pour convertir le texte en type requis (par exemple, Y/N/True/False = > boolean, 5 jan 2017 => Date) avant de passer à la fonction de filtrage elle-même.

Une option plus sophistiquée impliquerait une interface utilisateur appropriée dans la cellule de filtre, comme une case à cocher, une liste déroulante ou un sélecteur de date. Ceci, bien que certainement possible et probablement pas même si compliqué, est beaucoup plus de travail que l'option basée sur le texte.

Vous devriez vérifier my repo, c'est beaucoup plus à jour et a beaucoup de petites améliorations.