JQGrid filterToolbar ne fonctionne pas

Question

C'est la première fois que je travaille avec JQgrid. J'ai chargé avec succès des données à la grille mais ma toolToolbar ne fonctionne pas. voici mon avis

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Index 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<title>jqGrid for ASP.NET MVC - Demo</title> 
    <!-- The jQuery UI theme that will be used by the grid -->  
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" /> 
    <!-- The Css UI theme extension of jqGrid --> 
    <link rel="stylesheet" type="text/css" href="../../Content/themes/ui.jqgrid.css" />  
    <!-- jQuery library is a prerequisite for jqGrid --> 
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> 
    <!-- language pack - MUST be included before the jqGrid javascript --> 
    <script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script> 
    <!-- the jqGrid javascript runtime --> 
    <script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script> 

    <script type="text/javascript"> 
     var myGrid = $('#list'); 
     $(function() { 
      $("#list").jqGrid({ 
       url: '/JqGridClients/DynamicGridData/', 
       datatype: 'json', 
       mtype: 'GET', 

       colNames: ['ClientID', 'Address', 'Company', 'Name'], 
       colModel: [ 
      { name: 'ClientID', index: 'ClientID', search: false, width: 60, align: 'left' }, 
      { name: 'Address', index: 'Address', search: true, sortable: true, align: 'left' }, 
      { name: 'Company', index: 'Company', search: true, align: 'left', stype: 'select' }, 
      { name: 'Name', index: 'Name', search: true, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']}}], 
       pager: jQuery('#pager'), 
       rowNum: 10, 
       rowList: [5, 10, 20, 50], 
       sortname: 'ClientID', 
       sortorder: "desc", 
       viewrecords: true, 
       imgpath: '/scripts/themes/coffee/images', 
       caption: 'Clients', 

      }).navGrid('#pager', { search: true, edit: false, add: false, del: false, searchtext: "Search" }); 

       $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' }); 
     }); 


    </script> 

    <h2>Index</h2> 

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 

</asp:Content> 

Answer 1

<script type="text/javascript"> 
     var myGrid = $('#list'); 
     $(function() { 
      $("#list").jqGrid({ 
       url: '/JqGridClients/DynamicGridData/', 
       datatype: 'json', 
       mtype: 'GET', 

       colNames: ['ClientID', 'Address', 'Company', 'Name'], 
       colModel: [ 
      { name: 'ClientID', index: 'ClientID', search: false, width: 60, align: 'left' }, 
      { name: 'Address', index: 'Address', search: true, sortable: true, align: 'left' }, 
      { name: 'Company', index: 'Company', search: true, align: 'left', stype: 'select' }, 
      { name: 'Name', index: 'Name', search: true, sortable: true, align: 'left', searchoptions: { sopt: ['cn' ,'eq', 'ne']}}], 
       pager: jQuery('#pager'), 
       rowNum: 10, 
       width: '100%', 
       height: '100%', 
       rowList: [5, 10, 20, 50], 
       sortname: 'ClientID', 
       sortorder: "desc", 
       viewrecords: true, 
       imgpath: '/scripts/themes/coffee/images', 
       loadonce: true, 
       caption: 'Clients', 

      }).navGrid('#pager', { search: true, edit: false, add: false, del: false, searchtext: "Search" }); 

       $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' }); 

       $("#list").setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid'); 
     }); 


    </script> 

Je l'ai fait quelques modifications au script et cela fonctionne bien maintenant.

1. Ajoutez le paramètre loadonce: true
2. modifié les options de recherche ordre dans la colonne Nom

Answer 2

Vous utilisez correctement filterToolbar. Vous avez écrit juste "mon FilterToolbar ne fonctionne pas" sans aucun détail. Je suppose que vous n'avez pas implémenté le filtrage sur le serveur.

Si l'utilisateur saisit un filtre dans la barre d'outils du filtre, la nouvelle demande sera envoyée au serveur (à '/JqGridClients/DynamicGridData/'). L'option filter a le format décrit dans the documentation. Regardez the answer ou another one pour des exemples de code.

Si le nombre de lignes de la grille que vous devez afficher n'est pas trop grand (moins de 1000 lignes par exemple), vous pouvez simplifier votre code en utilisant pagination côté client et filtrage. Vous avez juste besoin de ne faire les modifications suivantes:

• ajouter loadonce: true option la grille
• changer le code du serveur afin que vous retourne toutes les pages de données (sans pagination sur le côté serveur) sur demande de jqGrid . Vous avez encore besoin de trier les données.

Vous devriez également examiner l'option de jqGrid que vous utilisez. Par exemple

• vous utilisez l'option imgpath qui est deprecated depuis jqGgrid 3.5 (la version actuelle est 4.4.5).
• vous devez utiliser gridview: true à la place qui améliore les performances
• vous devez remplacer pager: jQuery('#pager')-pager: '#pager' parce jqGrid besoin chaîne en tant que paramètre de jqGrid.
• vous devez réduire le fragment HTML avec <table> et <div> requis pour jqGrid à <table id="list" ></table><div id="pager"></div>. Tous les autres attributs (inclus class) sont obsolètes et ne sont pas utilisés dans les versions de jqGrid publiées au cours des 3 dernières années.