Comment implémenter la recherche sur jqgrid?

Question

J'ai donc un exemple basique d'utilisation de jqgrid 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 dont ils disposent dans les exemples jqgrid . (cliquez sur Manipulation / Données de grille). Mais je ne vois pas comment ils l'appliquent. Je m'attends par exemple une " recherche: true " et une méthode pour l'implémenter.

Quelqu'un a-t-il implémenté la recherche sur jqgrid ou connaissez-vous des exemples montrant explicitement comment le faire?

Answer 1

J'ai récemment implémenté cela moi-même (hier en fait) pour la première fois. Le plus gros obstacle pour moi était de savoir comment écrire la fonction du contrôleur. La signature de fonction est ce qui m'a pris le plus de temps à comprendre (remarquez les paramètres _search, searchField, searchOper et searchString comme étant absents de la plupart des exemples asp.net mvc que j'ai vus). Le javascript est envoyé au contrôleur 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, le contrôleur et le code javascript. Je m'excuse pour tout problème de formatage car c'est la première fois que je poste 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"});

Answer 2

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

Utiliser 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 et les arbres d'expression pour le tri et le filtrage des données.

Answer 3

Au cas où vous ne voudriez pas utiliser des paramètres optionnels, déclarez-les simplement comme nullables en ajoutant un ? après le nom du type.

Vous pourrez maintenant les comparer à null pour vérifier leur absence.

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

Answer 4

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

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

Answer 5

Suivez simplement ce lien . Il a toutes les implémentations expliquées ...

Vous pouvez créer un bouton searchBN et appeler le formulaire de recherche en cliquant sur

.

$("#searchBtn").click(function(){
   jQuery("#list4").searchGrid(
   {options}
    )});