Question

尝试使用jquery.jqgrid.js尝试使用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 在之外{{1} }}。如果您在jQuery(document).ready内移动它，您会立即看到搜索工具栏：请参阅here。

您的代码还有其他小问题：

jQuery(document).ready内的变量i应声明为本地变量而不是全局变量。
您应删除已弃用的参数gridComplete。
您使用imgpath参数的许多选项以及colModel，sortable:true，sorttype: 'text'等默认值。它只会使代码更长，更慢，更难以阅读。我建议您查看描述align: 'left'参数的the part of documentation并删除默认属性。
如果使用colModel而没有sorttype，您使用的datatype: 'json'属性将无效。所以你应该决定使用基于服务器的排序，分页和过滤/搜索，你应该更好地删除loadonce:true属性，或者你应该使用sorttype，但是应该同时加载网格包含对服务器的第一个请求。
没有loadonce:true列属性。

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

1 个答案: