web-dev-qa-db-fra.com

Comment implémenter la recherche sur jqgrid?

J'ai donc un exemple de base de jqgrid fonctionnant dans 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'
        });

Maintenant, j'essaie d'implémenter le bouton de recherche qu'ils ont dans les exemples jqgrid (cliquez sur Manipulating/Grid Data). Mais je ne vois pas comment ils l'appliquent. J'attends par exemple une "recherche: vrai" 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?

asp.net-mvcjqgrid
29
Edward Tanguay

J'ai récemment implémenté cela moi-même (hier en fait) pour la première fois. Le plus gros 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 (notez les paramètres _search, searchField, searchOper et searchString car ceux-ci sont absents de la plupart des exemples mvc asp.net que j'ai vus). Le javascript publie sur le contrôleur à la fois pour le chargement initial et pour l'appel de recherche. Vous verrez dans le code que je vérifie si le paramètre _search est vrai ou non.

Ci-dessous se trouve le contrôleur et le code javascript. Mes excuses pour tout problème de formatage car c'est ma première publication ici.

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"});
40
Alan

Voir mon article sur codeproject, qui explique comment nous pouvons effectuer plusieurs recherches dans jqgrid:

tilisation de la barre d'outils de recherche de jqGrid avec plusieurs filtres dans ASP.NET MVC

J'utilise IModelBinder pour la liaison des paramètres de la grille, les arborescences d'expression pour le tri et le filtrage des données.

19
Ilya Builuk

Au cas où vous vous poseriez toujours des questions sur les paramètres facultatifs, déclarez-les simplement comme nullables en ajoutant un ? après le nom du type.

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

Notez que vous n'avez pas besoin de le faire avec des chaînes, car elles peuvent déjà être annulées.

2
Daniel Earwicker