2013-05-13 95 views
0

这是我第一次与jqGrid的工作。我已成功将数据加载到网格,但我的filterToolbar无法正常工作。这里是我的看法的jqGrid filterToolbar不工作

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

具有u在控制台得到纽约州的错误? – 2013-05-13 04:34:59

+0

@vishalsharma没有错误在控制台 – chamara 2013-05-13 04:41:07

+0

把navgrid作为filtertoolbar – 2013-05-13 04:55:59

回答

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> 

我做的脚本一些变化,现在工作的罚款。

  1. 添加参数loadonce:真
  2. 改变在名称栏中的搜索选项顺序
4

您正确使用filterToolbar。你没有任何细节就写了“我的filterToolbar无法正常工作”。我想你只是没有在服务器端实现过滤。

如果用户过滤器工具条中输入筛选新的请求将被发送到服务器(以'/JqGridClients/DynamicGridData/')。选项filter的格式如the documentation所述。查看the answeranother one查看代码示例。

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

  • 上的jqGrid的要求增加loadonce: true选项电网
  • 变更的服务器代码,以便您返回数据的所有页面(不包括在服务器端分页) 。您仍然需要对数据进行排序。

,你应该额外检查你使用的jqGrid的选项。例如

  • 使用imgpath选项,这是因为deprecated 3.5 jqGgrid(目前的版本是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版本中使用。