JQGrid过滤器工具栏不工作

Question

这是我第一次使用JQgrid。我已经成功地将数据加载到网格，但我的过滤器工具栏不工作。这是我的观点

<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

正确使用filterToolbar。你只写了"我的过滤器工具栏不工作"，没有任何细节。我猜你只是没有在服务器端实现过滤。

如果用户在过滤器工具栏中输入filter，新的请求将被发送到服务器(发送到'/JqGridClients/DynamicGridData/')。filter选项具有文档中描述的格式。查看答案或其他代码示例。

如果您需要显示的网格中的行数不是那么大(例如少于1000行)，那么您可以通过使用客户端分页和过滤来简化代码。您只需要做以下更改:

• 添加loadonce: true选项到网格
• 更改服务器代码，以便在jqGrid请求时返回所有数据页(在服务器端不分页)。你仍然需要对数据进行排序。

您应该另外查看您使用的jqGrid选项。例如

• 你使用imgpath选项，自jqgrid 3.5(当前版本是4.4.5)以来已弃用。
• 你需要使用gridview: true来提高性能
• 你应该将pager: jQuery('#pager')替换为pager: '#pager'，因为jqGrid需要字符串作为jqGrid的参数。
• 你应该减少HTML片段与<table>和<div>所需的jqGrid到<table id="list" ></table><div id="pager"></div>。所有其他属性(包括class)都已弃用，并且在最近3年发布的jqGrid版本中不再使用。

Answer 2

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

我对脚本做了一些修改，现在它工作得很好。

1. 添加参数loadonce: true
2. 更改了名称列中的搜索选项顺序