Панель инструментов поиска 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, вы сразу увидите панель инструментов поиска: см. здесь .

В вашем коде есть другие небольшие проблемы:

1. переменная i внутри gridComplete должен быть объявлен как локальная, а не глобальная переменная.
2. Вы должны удалить устаревший параметр imgpath.
3. Вы используете множество опций colModel параметров со значениями по умолчаниюкак sortable:true, sorttype: 'text', align: 'left' и так далее.Это делает только код длиннее, медленнее и труднее для чтения.Я рекомендую вам посмотреть в часть документации , которая описывает colModel параметры и удалить свойства по умолчанию.
4. Используемое вами свойство sorttype не будет работать в случае использования datatype: 'json' без loadonce:true.Таким образом, вы должны решить, используете ли вы серверную сортировку, разбиение по страницам и фильтрацию / поиск, и вам лучше удалить в случае sorttype свойства, либо вы должны использовать loadonce:true, но содержимое таблицы должно быть загружено сразу при первом запросе ксервер.
5. Нет свойства autoFit столбца.