ASP.NET MVC中jqGrid列过滤工具栏无法生效问题求助

我是jqGrid新手，在C# ASP.NET MVC项目中遇到列过滤问题——使用过滤工具栏（含搜索按钮）进行过滤时完全无效果。已尝试多种方案但均未解决，现附上视图层代码（控制器端有返回SQL数据的Get接口），恳请协助排查问题。

<div>
    <table id="grid"></table>
    <div id="pager"></div>
</div>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.3/js/jquery.jqgrid.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.4/css/ui.jqgrid.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.4/js/jquery.jqgrid.min.js"></script>

<script>
   $(function () {
   
       $grid = $("#grid"),
           initDatepicker = function (elem) {
               $(elem).datepicker({
                   dateFormat: "dd-M-yy",
                   autoSize: true,
                   changeYear: true,
                   changeMonth: true,
                   showButtonPanel: true,
                   showWeek: true
               });
           };

       $grid.jqGrid
           ({
               url: "/controller/jsonAction",
               datatype: 'json',
               mtype: 'Get',
   
               //table header name
               colNames: ['Id', 'colDate', 'colText', 'colText1', 'colText2', 'colText3', 'colText4', 'colChar', 'colChar1', 'colText5'],
               //colModel takes the data from controller and binds to grid
               colModel: [
                   {
                       key: true,
                       hidden: true,
                       name: 'ID',
                       editable: false
                   },
   
                   {
                       name: "col1DateType", sorttype: "date",
                       formatter: "date", formatoptions: { newformat: "d-M-Y" },
                       editoptions: { dataInit: initDatepicker },
                       searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDatepicker }
                   },
   
                   {
                       name: "col2TextType", width: 193, cellattr: function (rowId, tv, rawObject, cm, rdata) {
                           return 'style="white-space: normal;"';
                       }
                   },
   
                   {
                       name: "Col3Texttype", cellattr: function (rowId, tv, rawObject, cm, rdata) {
                           return 'style="white-space: normal;"';
                       }
                   },
   
                   {
                       name: "col4ComboTypeText", formatter: "select",
                       edittype: "select", editoptions: { value: "test:test;test1:test1;test2:test2", defaultValue: "IN" },
   
                       stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":[All];test:test;test1:test1;test2:test2" }
                   },
   
                   { name: "col5TypeText" },
   
                   { name: "col6TypeText" },
   
                   {
                       name: "col7ComboTypeChar", width: 100, formatter: "select",
                       edittype: "select", editoptions: { value: "L:L;M:M;H:H", defaultValue: "IN" },
                       stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":[All];L:L;M:M;H:H" }
                   },
   
                   {
                       name: "col8ComboTypeChar", width: 100, formatter: "select",
                       edittype: "select", editoptions: { value: "L:L;M:M;H:H", defaultValue: "IN" },
                       stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":[All];L:L;M:M;H:H" }
                   },
   
                   {
                       name: "col9ComboTypeText", formatter: "select",
                       edittype: "select", editoptions: { value: "test3:test3;test4:test4;test5:test5", defaultValue: "IN" },
                       stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":[All];test3:test3;test4:test4;test5:test5" }
                   }
               ],
               cmTemplate: { autoResizable: true },
               iconSet: "fontAwesome",
   
               pager: true,
               autoencode: true,
               sortname: "invdate",
               sortorder: "desc",
               search: true,
   
               shrinkToFit: false,
               multiPageSelection: true,
   
               pager: jQuery('#pager'),
               rowNum: 10,
               rowList: [10, 20, 30, 40],
               height: '100%',
               width: '100%',
               viewrecords: true,
               loadonce: false,
              
               emptyrecords: 'No records to display',
               jsonReader:
               {
                   root: "rows",
                   page: "page",
                   total: "total",
                   records: "records",
                   repeatitems: false,
                   Id: "0"
               },
               autowidth: true,
               multiselect: false,
             
               searching: {
                   searchOnEnter: true,
                   stringResult: true,
                   defaultSearch: "cn",
                   multipleSearch: true,
                   multipleGroup: true,
                   searchOnEnter: true,
                   closeOnEscape: true
               }
              
           }).navGrid('#pager', { edit: false, add: false, del: false, search: true }
   
           ).jqGrid("filterToolbar");
   
      
     
   });
   
   
</script>

排查要点 #

• 重复引入jqGrid脚本：代码中同时加载了4.13.3和4.13.4版本的jqGrid，版本冲突会导致功能异常，需删除其中一个，建议保留4.13.4版本。
• 服务端/客户端过滤模式不匹配：当前loadonce: false为服务端分页模式，过滤请求会发送到后端接口，需确认/controller/jsonAction接口是否能接收并处理jqGrid的过滤参数（如filters、searchField等），并在SQL查询中应用过滤逻辑；若要客户端过滤，需将loadonce设为true。
• sortname参数错误：配置中sortname: "invdate"，但colModel中无此列，会导致初始化异常影响过滤，需修改为colModel中存在的列名（如ID或col1DateType）。
• pager重复配置：代码中同时设置了pager: true和pager: jQuery('#pager')，需删除其中一个，保留pager: '#pager'即可。
• 搜索配置重复：searching选项中重复设置searchOnEnter: true，需删除重复项。
• 字段名大小写不匹配：确认控制器返回的JSON字段名与colModel的name属性完全一致（如Col3Texttype的大小写是否和后端返回字段匹配），字段不匹配会导致过滤无法定位数据。

内容的提问来源于stack exchange，提问作者MrWella