Comment mettre en place une recherche sur jqgrid ?

Question

J'ai donc un exemple basique de jqgrid fonctionnant en ASP.NET MVC, le javascript ressemble à ceci :

    $(document).ready(function() {

        $("#list").jqGrid({
            url: '../../Home/Example',
            datatype: 'json',
            myType: 'GET',
            colNames: ['Id', 'Action', 'Parameters'],
            colModel: [
                   { name: 'id', index: 'id', width: 55, resizable: true },
                   { name: 'action', index: 'action', width: 90, resizable: true },
                   { name: 'paramters', index: 'parameters', width: 120, resizable: true}],
            pager: $('#pager'),
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'id',
            sortorder: 'desc',
            viewrecords: true,
            multikey: "ctrlKey",
            imgpath: '../../themes/basic/images',
            caption: 'Messages'
        });

J'essaie maintenant de mettre en œuvre le bouton de recherche qu'ils ont dans la page d'accueil du site. exemples de jqgrid (cliquez sur Manipulation/Données de la grille). Mais je ne vois pas comment ils l'implémentent. J'attends par exemple un "search:true" et une méthode pour l'implémenter.

Quelqu'un a-t-il implémenté la recherche sur jqgrid ou connaît-il des exemples qui montrent explicitement comment le faire ?

Answer 1

Je l'ai récemment mis en œuvre moi-même (hier en fait) pour la première fois. Le plus grand obstacle pour moi a été de trouver comment écrire la fonction du contrôleur. La signature de la fonction est ce qui m'a pris le plus de temps à comprendre (remarquez les paramètres _search, searchField, searchOper, et searchString car ils sont absents de la plupart des exemples asp.net mvc que j'ai vus). Le javascript est envoyé au contrôleur à la fois pour le chargement initial et pour l'appel à la recherche. Vous verrez dans le code que je vérifie si le paramètre _search est vrai ou non.

Voici le contrôleur et le code javascript. Je m'excuse pour les problèmes de formatage car c'est la première fois que je poste sur ce site.

public ActionResult GetAppGroups(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
{
    List<AppGroup> groups = service.GetAppGroups();
    List<AppGroup> results;
    if (_search)
       results = groups.Where(x => x.Name.Contains(searchString)).ToList();
    else
       results = groups.Skip(page * rows).Take(rows).ToList();

    int i = 1;

    var jsonData = new
    {
        total = groups.Count / 20,
        page = page,
        records = groups.Count,
        rows = (
            from appgroup in results
            select new
            {
                i = i++,
                cell = new string[] {
                         appgroup.Name,
                         appgroup.Description
                     }
            }).ToArray()
    };

    return Json(jsonData);
}

Et voici mon HTML/Javascript :

$(document).ready(function() {
  $("#listGroups").jqGrid({
    url: '<%= ResolveUrl("~/JSON/GetAppGroups/") %>',
    datatype: 'json',
    mtype: 'GET',
    caption: 'App Groups',
    colNames: ['Name', 'Description'],
    colModel: [
        { name: 'Name', index: 'Name', width: 250, resizable: true, editable: false},
        { name: 'Description', index: 'Description', width: 650, resizable: true, editable: false},
    ],
    loadtext: 'Loading Unix App Groups...',
    multiselect: true,
    pager: $("#pager"),
    rowNum: 10,
    rowList: [5,10,20,50],
    sortname: 'ID',
    sortorder: 'desc',
    viewrecords: true,
    imgpath: '../scripts/jqgrid/themes/basic/images'
//});
}).navGrid('#pager', {search:true, edit: false, add:false, del:false, searchtext:"Search"});

Answer 2

Voir mon article sur codeproject, qui explique comment on peut faire des recherches multiples dans jqgrid :

Utiliser la barre d'outils de recherche de jqGrid avec des filtres multiples dans ASP.NET MVC

J'utilise IModelBinder pour lier les paramètres de la grille, les arbres d'expression pour trier et filtrer les données.

Answer 3

Au cas où vous vous poseriez encore des questions sur le traitement des paramètres optionnels, il suffit de les déclarer comme nullables en ajoutant un élément ? après le nom du type.

Vous pourrez désormais les comparer avec null pour vérifier s'ils sont absents.

Notez que vous n'avez pas besoin de faire cela avec les chaînes de caractères, car elles sont déjà nullables.

Answer 4

Vérifiez si vous avez inclus le fichier jquery.searchFilter.css

Answer 5

@Alan - ok, j'ai utilisé votre méthode et j'ai étendu mon webservice pour attendre ces trois paramètres supplémentaires et vérifier que "_search" est vrai/faux. Mais, pour que cela fonctionne, j'ai dû ajouter ceci à mon appel ajax dans le JavaScript :

if (!postdata._search) {    
           jQuery("#mygrid").appendPostData( {searchField:'', searchOper:'', searchString:''});  
}