0

This is the first time i'm working with the JQgrid. I've successfully loaded data to the Grid but my filterToolbar is not working. here is my view

<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>
4

2 回答 2

4

You use correctly filterToolbar. You wrote just "my filterToolbar is not working" without any details. I suppose that you just not implemented filtering on the server side.

If the user enter filter in the filter toolbar new request will be send to the server (to '/JqGridClients/DynamicGridData/'). The option filter has format described in the documentation. Look at the answer or another one for code examples.

If the number of rows in the grid which you need to display not so large (less as 1000 rows for example) then you can simplify your code by usage client side paging and filtering. You need just do make the following changes:

  • add loadonce: true option to the grid
  • change the server code so that you returns all pages of data (without paging on the server side) on request of jqGrid. You need still sort the data.

You should additionally review the option of jqGrid which you use. For example

  • you use imgpath option which is deprecated since jqGgrid 3.5 (the current version is 4.4.5).
  • you need use gridview: true instead which improves performance
  • you should replace pager: jQuery('#pager') to pager: '#pager' because jqGrid need string as parameter of jqGrid.
  • you should reduce HTML fragment with <table> and <div> needed for jqGrid to <table id="list" ></table><div id="pager"></div>. All other attributes (inclusive class) are deprecated and are not used in versions of jqGrid published last 3 years.
于 2013-05-13T05:21:20.837 回答
0 
<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>

I did few changes to the script and it's working fine now.

  1. Add the parameter loadonce: true
  2. Changed the search options order in Name column
于 2013-05-13T05:21:24.730 回答