时间戳

首页 > 解决方案 > 键入时 jqGrid 工具栏未过滤

jqgrid - 键入时 jqGrid 工具栏未过滤

问题描述

使用 jqGrid js v5.5.0，键入功能的过滤器不适用于某些字段。

在“标题”字段中键入会导致该列仅显示与输入内容匹配的值。

在此处输入图像描述

在串行过滤器中键入“2”不会显示任何内容。

在此处输入图像描述

预期结果是序列列的行为与标题列完全相同并显示部分匹配。

所有数据都预加载到网格中。

这是演示该问题的代码和小提琴。

http://jsfiddle.net/rboarman/p7uyq6w2/15/

var mydata = [{
    "Id": "5b1600409fc4a04a1001af6c",
    "HitNumber": "2169957",
    "Title": "Centrifuge",
    "ClientIdNumber": "",
    "Status": "Requested",
    "IsVisible": false,
    "Manufacturer": "Corning",
    "ModelNumber": "6765/C1501",
    "SerialNumber": "",
    "BookValue": "0",
    "Location": "San Francisco, CA",
    "ServiceStatus": "",
    "Condition": "",
    "Category": "Centrifuge",
    "Catalog": "Default",
    "Selected": "0",
    "AvailForRedeploy": "/Date(1485849600000)/"
  },
  {
    "Id": "5b1600409fc4a04a1001af6b",
    "HitNumber": "2169956",
    "Title": "Centrifuge",
    "ClientIdNumber": "",
    "Status": "Requested",
    "IsVisible": false,
    "Manufacturer": "Corning",
    "ModelNumber": "6765/C1501",
    "SerialNumber": "",
    "BookValue": "0",
    "Location": "San Francisco, CA",
    "ServiceStatus": "",
    "Condition": "",
    "Category": "Centrifuge",
    "Catalog": "Default",
    "Selected": "0",
    "AvailForRedeploy": "/Date(1485849600000)/",
  },
  {
    "Id": "5b1600409fc4a04a1001af70",
    "HitNumber": "2169961",
    "Title": "Pipettes",
    "ClientIdNumber": "",
    "Status": "Available",
    "IsVisible": true,
    "Manufacturer": "Sartorius",
    "ModelNumber": "Picus / Tacta",
    "SerialNumber": "",
    "BookValue": "0",
    "Location": "San Francisco, CA",
    "ServiceStatus": "",
    "Condition": "",
    "Category": "Pipettes",
    "Catalog": "Default",
    "Selected": "0",
    "AvailForRedeploy": "/Date(1485849600000)/",
  }
];

grid = $("#jqgrid").jqGrid({
  data: mydata, //insert data from the data object we created above
  datatype: 'local',
  ajaxGridOptions: {
    contentType: 'application/json; charset=utf-8'
  },
  height: 'auto',
  colNames: ['Id', 'Serial', 'Title', 'AvailForRedeploy'],
  colModel: [{
      name: 'Id',
      index: 'Id',
      hidden: true,
    },
    {
      name: 'HitNumber',
      index: 'Hit #',
      sortable: true,
      search: true
    },
    {
      name: 'Title',
      index: 'Title',
      sortable: true,
    },
    {
      name: 'AvailForRedeploy',
      index: 'AvailForRedeploy',
      formatter: 'date',
      formatoptions: {
        srcformat: "ISO8601Long",
        newformat: "m/d/Y h:i A"
      },
      sortable: true,
    }
  ],
  rowNum: 25,
  rowTotal: 2000,
  loadonce: true,
  rowList: [25, 50, 100],
  pager: '#pjqgrid',
  sortname: 'id',
  toolbarfilter: true,
  viewrecords: true,
  sortorder: "asc",
  caption: "",
  multiselect: true,
  multiboxonly: true,
  autowidth: true,
  toolbar: [true, "both"],
});

$("#jqgrid").filterToolbar({
  stringResult: true,
  searchOnEnter: false
});

标签： jqgrid

解决方案

您遇到的问题在于 colModel 中的定义，尤其是 index 属性。

此属性不能具有空间值。此外，定义时的索引属性用于搜索。你的定义是：

{
    name: 'HitNumber',
    index: 'Hit #',
    sortable: true,
    search: true
},

这是不正确的。为了这个工作设置在您的数据中使用的名称：即

{
    name: 'HitNumber',
    index: 'HitNumber,
    sortable: true,
    search: true
},

有关 colModel 选项索引的更多信息，您可以在此处阅读我们的文档

推荐阅读