jqgrid搜索工具栏不会弹出使用jquery.jqgrid.js

Question

我试图添加搜索栏与jquery.jqgrid.js后尝试几种方法这种方法是唯一一个没有给我一个错误，但也没有它显示我的搜索工具栏，可以有人看看，看看我是否失去了什么？

jQuery(document).ready(function() { 
    jQuery("#list").jqGrid({ 
     url: '/Home/DynamicGridData/', 
     datatype: 'json', 
     mtype: 'POST', 
     colNames: ['Edit', 'AlertId', 'Policy', 'PolicyRule', 'Alert Status', 
        'Alert Code', 'Message', 'Category'], 
     colModel: [ 
     { name: 'Edit', edittype: 'select', formatter: 'showlink' }, 
     { name: 'AlertId', index: 'AlertId', sortable: true, sorttype: 'int', 
     autoFit: true, align: 'left', hidden: true }, 
     { name: 'Policy', index: 'Policy.Name', sortable: true, sorttype: 'text', 
     autoFit: true, searchoptions: { sopt: ['eq', 'ne', 'cn'] }, 
     align: 'left' }, 
     { name: 'Policy Rule', index: 'PolicyRule', sortable: true, 
     sorttype: 'text', autoFit: true, sorttype: 'text', 
     searchoptions: { sopt: ['eq', 'ne', 'cn'] }, align: 'left' }, 
     { name: 'Alert Status', index: 'AlertStatus.status', sortable: true, 
     sorttype: 'text', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, 
     autoFit: true, align: 'left' }, 
     { name: 'Alert Code', index: 'Code', sortable: true, sorttype: 'text', 
     align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, 
     autoFit: true }, 
     { name: 'Message', index: 'Message', sortable: true, sorttype: 'text', 
     align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn'] }, 
     autoFit: true }, 
     { name: 'Category', index: 'Category.name', sortable: true, 
     sorttype: 'text', align: 'left', autoFit: true, 
     searchoptions: { sopt: ['eq', 'ne', 'cn'] }}], 
     pager: $("#pager"), 
     rowNum: 10, 
     rowList: [10, 60, 100], 
     scroll: true, 
     sortname: 'AlertId', 
     sortorder: 'asc', 
     viewrecords: true, 
     imgpath: '/scripts/themes/basic/images', 
     caption: 'my name', 
     gridComplete: function() { 
      var objRows = $("#list tr"); 
      var objHeader = $("#list.jqgfirstrow td"); 
      if (objRows.length > 1) { 
       var objFirstRowColumns = $(objRows[1]).children("td"); 
       for (i = 0; i < objFirstRowColumns.length; i++) { 
        $(objFirstRowColumns[i]).css("width", 
               $(objHeader[i]).css("width")); 
       } 
      } 
     } 
    }); 
}); 

$("#list").jqGrid('navGrid','#pager', 
        {edit:true,add:true,del:true,search:true,refresh:true}); 
$("#list").jqGrid('navButtonAdd',"#pager", 
        {caption:"Toggle",title:"Toggle Search Toolbar", 
        buttonicon :'ui-icon-pin-s',   
        onClickButton:function() {     
         $("#list")[0].toggleToolbar() 
        } }); 
$("#list").jqGrid('navButtonAdd',"#pager", 
        { caption: "Clear", title: "Clear Search", 
        buttonicon :'ui-icon-refresh', 
        onClickButton:function(){     
         $("#list")[0].clearToolbar() 
        } }); 
jQuery("#list").jqGrid('filterToolbar'); 

Answer 1

你的代码的人能看到你的主要错误格式的完善的售后服务：你叫navGrid，navButtonAdd和filterToolbar外jQuery(document).ready。如果您将其移动到jQuery(document).ready内，您将立即看到搜索工具栏：请参见here。

你的代码有其他的小问题：

1. 变量i内gridComplete应该被声明为本地而不是全局变量。
2. 您应该删除不推荐使用的参数imgpath。
3. 使用colModel参数的许多选项，其默认值为sortable:true,sorttype: 'text',align: 'left'等。它只会使代码更长，更慢，更难以阅读。我建议您查看the part of documentation，其中描述了colModel参数并删除默认属性。
4. 您使用的sorttype属性在使用情况下不起作用datatype: 'json'没有loadonce:true。因此，您应该决定使用基于服务器的排序，分页和过滤/搜索，并且您应该在sorttype属性中更好地删除，或者应该使用loadonce:true，但是应在第一次请求服务器时立即加载网格包含。
5. 有没有autoFit列属性。