Question

问题：

使用jqgrid显示表的数据。 table有外键，我们想显示其外键的文本而不是Id。我还希望用户可以对外键进行排序和过滤。

示例：

人员表：Id，Name，EducationId（教育表的外键）
教育能力：Id，姓名

我们希望在jqgrid中向每个人显示他/她的教育名称。

如果用户点击了教育列，则会根据Education Name（非Education Id）
如果用户希望过滤教育，我们会显示一个包含教育名称的下拉列表（选择器），在用户选择一个后，过滤器包含EducationId sField和Id所选值为sValue

我的解决方案：

var items1 = {@Html.GetEduType()};

$(function () {
        $("#list").jqGrid({
            url: '/Home/GridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Name','Education'],
            colModel: [
          { name: 'Name', index: 'Name' },
          { name: 'EducationId', index: 'Education.Name', search: true, 
             stype: 'select', searchoptions: { value: items1, sopt: ['eq', 'ne'] },
             formatter: 'select' , editoptions: { value: items1 }}],            
            viewrecords: true});
$("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });

使用此代码，Home/GetData只需发送Person.Id，Person.Name，Person.EducationId作为json数据，并且不发送比客户端需求更多的数据真的很好。它还会在Education Id和Name之间发送一次关系，这些数据用于在网格中显示名称而不是id，还可以创建下拉值和文本。
我忽略了写其他属性，如pager，pagesize等
@Html.GetEduType()是剃刀服务器端功能。它只返回像这样的对 [Education Id]:[Education Name]。例如：（1:'Diploma',2:'M.S.',...）（我只使用它来获取教育数据一次但没有使用UrlData）（是的，我在ASP.Net MVC 3中使用它，但它不是一个重点）

我的问题：它非常适合显示数据并根据其名称对教育进行排序。但是，当我想过滤Education时，它会将Http Post Education.Name中的索引值（EducationId）而非名称值（sField）发送到服务器。只需发送名称值而不是索引值即可解决此问题。

感谢。

Answer 1

我用这种方式解决了我的问题：

首先，我处理beforeSearch事件：

.filterToolbar({ stringResult: true, beforeSearch: searchPreparation })

以下是searchPreparation功能：

function searchPreparation(grid) {
  if (grid == undefined)
      grid = $(this);
  else
      grid = $(grid);
  var postData = grid.jqGrid('getGridParam', 'postData');
  var searchData = jQuery.parseJSON(postData.filters);
  var gridCol = grid.getGridParam("colModel");
  for (var i = 0; i < searchData.rules.length; i++) {
      for (var j = 0; j < gridCol.length; j++) {
          if (gridCol[j].index != gridCol[j].name && searchData.rules[i].field == gridCol[j].name) {
              searchData.rules[i].field == gridCol[j].index;
              break;
          }
      }
  }
  grid.jqGrid('setGridParam', { postData: { filters: JSON.stringify(searchData)} });
  return false;
}

首先在searchPreparation中我发布数据并解析它。之后，我搜索其索引不等于其名称的列，并查找是否有任何包含这些列的过滤器。如果有任何列，我用index替换字段。最后我设置了帖子数据。通过JSON.stringify通知数据转换为Json，您可以找到它here。

我将此函数用于带下拉列表的过滤数据（使用下拉项目的值不是文本）

在排序和搜索期间，JqGrid使用colModel的index属性而不是name属性

1 个答案: