web-dev-qa-db-fra.com

jqgrid peut-il prendre en charge des menus déroulants dans les champs de filtre de la barre d’outils

j'utilise jqgrid et le filtre de la barre d'outils. Par défaut, il vous donne simplement une zone de texte dans laquelle entrer des données. Prend-il en charge une liste déroulante de sélection déroulante dans laquelle je peux lui donner une liste de valeurs à choisir pour les filtrer?

jqueryjqgrid
35
leora

Il y a quelques règles communes pour tous les types de tri dans jqGrid

{
    name: 'Category', index: 'Category', width: 200, formatter:'select', 
    stype: 'select', searchoptions:{ sopt:['eq'], value: categoriesStr }
}

où categoriesStr sont définis comme

var categoriesStr = ":All;1:sport;2:science";

Ici, en plus de la norme "1: sport; 2: science", des valeurs sont insérées dans la chaîne ": Tous", ce qui vous permet de ne pas filtrer la colonne. Vous pouvez bien sûr utiliser ":" ou ": Sélectionnez ..." et ainsi de suite.

Sur la démo préparée pour la réponse , vous pouvez voir les résultats proches.

MIS À JOUR: Je trouve votre question intéressante et fait la démo _. Il montre comment on peut construire les combobox de sélection utilisables dans la barre d’outils de recherche ou dans la boîte de dialogue de recherche avancée en fonction du contenu en texte de la colonne correspondante. Pour une colonne, j’utilise en outre auto-complétion de jQuery UI . Vous pouvez modifier le code pour utiliser plusieurs options puissantes de la saisie semi-automatique. Voici le code du code:

var mydata = [
        {id:"1", Name:"Miroslav Klose",     Category:"sport",   Subcategory:"football"},
        {id:"2", Name:"Michael Schumacher", Category:"sport",   Subcategory:"formula 1"},
        {id:"3", Name:"Albert Einstein",    Category:"science", Subcategory:"physics"},
        {id:"4", Name:"Blaise Pascal",      Category:"science", Subcategory:"mathematics"}
    ],
    grid = $("#list"),
    getUniqueNames = function(columnName) {
        var texts = grid.jqGrid('getCol',columnName), uniqueTexts = [],
            textsLength = texts.length, text, textsMap = {}, i;
        for (i=0;i<textsLength;i++) {
            text = texts[i];
            if (text !== undefined && textsMap[text] === undefined) {
                // to test whether the texts is unique we place it in the map.
                textsMap[text] = true;
                uniqueTexts.Push(text);
            }
        }
        return uniqueTexts;
    },
    buildSearchSelect = function(uniqueNames) {
        var values=":All";
        $.each (uniqueNames, function() {
            values += ";" + this + ":" + this;
        });
        return values;
    },
    setSearchSelect = function(columnName) {
        grid.jqGrid('setColProp', columnName,
                    {
                        stype: 'select',
                        searchoptions: {
                            value:buildSearchSelect(getUniqueNames(columnName)),
                            sopt:['eq']
                        }
                    }
        );
    };

grid.jqGrid({
    data: mydata,
    datatype: 'local',
    colModel: [
        { name:'Name', index:'Name', width:200 },
        { name:'Category', index:'Category', width:200 },
        { name:'Subcategory', index:'Subcategory', width:200 }
    ],
    sortname: 'Name',
    viewrecords: true,
    rownumbers: true,
    sortorder: "desc",
    ignoreCase: true,
    pager: '#pager',
    height: "auto",
    caption: "How to use filterToolbar better locally"
}).jqGrid('navGrid','#pager',
          {edit:false, add:false, del:false, search:false, refresh:false});

setSearchSelect('Category');
setSearchSelect('Subcategory');

grid.jqGrid('setColProp', 'Name',
            {
                searchoptions: {
                    sopt:['cn'],
                    dataInit: function(elem) {
                        $(elem).autocomplete({
                            source:getUniqueNames('Name'),
                            delay:0,
                            minLength:0
                        });
                    }
                }
            });

grid.jqGrid('filterToolbar',
            {stringResult:true, searchOnEnter:true, defaultSearch:"cn"});

C'est ce que tu veux?

MIS &AGRAVE; JOUR: Une option supplémentaire pourrait être l'utilisation du plugin select2 _ qui combine les avantages du menu déroulant et de la recherche confortable par Autocomplete. Voir la réponse et celui-ci (voir la démo) pour des démonstrations ( celui-ci et celui-ci ) et des exemples de code. 

UPDATED 2: La réponse contient la modification du code ci-dessus pour fonctionner avec jqGrid 4.6/4.7 ou avec free jqGrid 4.8 .

67
Oleg

J'ai eu une situation similaire. Merci à l'excellent exemple d'Oleg ci-dessus, il a presque résolu le problème. Il y avait une légère amélioration dont j'avais besoin. Ma grille est une grille de chargement comprenant environ 40 lignes, 10 par page. La méthode getCol utilisée ci-dessus ne renvoie que les valeurs de colonne de la page en cours. Mais je voulais renseigner le filtre avec des valeurs uniques sur l'ensemble du jeu de données. Voici donc une légère modification de la fonction getUniqueNames: 

var getUniqueNames = function(columnName) {

// Maybe this line could be moved outside the function           
// If the data is really huge then the entire segregation could
// be done in a single loop storing each unique column
// in a map of columnNames -> unique values
var data = grid.jqGrid('getGridParam', 'data');
var uniqueTexts = [], text, textsMap = {}, i;

for (i = 0; i < data.length; i++) {

                 text = data[i][columnName];

                 if (text !== undefined && textsMap[text] === undefined) {
                     // to test whether the texts is unique we place it in the map.
                     textsMap[text] = true;
                     uniqueTexts.Push(text);
                 }
             }

         // Object.keys(textsMap); Does not work with IE8: 
             return uniqueTexts;
}
2
msanjay

Je viens de faire cela moi-même. Cela ressemblait un peu à un bidouillage, mais ça marche! 

  1. Création d'un nouveau "navButtonAdd" et pour la "légende", ajout du code HTML pour une liste déroulante. 
  2. La fonction onclickButton ne contient rien. 

  3. Ensuite, j'ai créé une fonction onchange pour gérer le rechargement de la grille lorsque sa valeur Était modifiée. 

        $('#myGrid').jqGrid('navButtonAdd', '#myGrid_toppager', {
        caption: "<select id='gridFilter' onchange='ChangeGridView()'><option>Inbox</option><option>Sent Messages</option></select>",
        title: "Apply Filter",
        onClickButton: function () {                 
        }
    });

    function ChangeGridView() {
        var gridViewFilter = $("#gridFilter").val();
        $('#myGrid').setGridParam({ datatype: 'json', url: '../../Controller/ActionJSON', postData: { msgFilter: gridViewFilter } });
        $('#myGrid').trigger("reloadGrid"); 
    };

    J'espère que cela t'aides!

1
Losbear

catégorie est le nom de la colonne.

loadComplete: function () {
    $("#" + TableNames).setColProp('Category', {
        formatter: 'select', edittype: "select",
        editoptions: { value: "0:MALE;1:FEMALE;2:other;" }
    });
},
0
Narendra