jquery - JqG​​rid 在排序和搜索期间使用 colModel 的索引属性而不是名称属性

Question

问题:

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

示例:

• 人员表:Id、姓名、EducationId(教育表的外键)
• 受过教育:身份证号、姓名

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

1. 如果用户点击教育列，则会按照 Education Name 排序(不是Education Id)
2. 如果用户想要过滤教育，我们会显示一个包含教育名称的下拉列表(选择器)，用户选择一个后，过滤器包含 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 });

1. 使用此代码，Home/GetData只需发送Person.Id , Person.Name , Person.EducationId作为 json 数据，发送的数据量最好不要超过客户端需要的量。它还发送 Education Id 之间的关系和Name一次，这些数据用于在网格中显示名称而不是 id，并且还用于创建下拉值和文本。
2. 我忽略写入其他属性，如寻呼机、页面大小等
3. @Html.GetEduType()是razor服务器端功能。它只返回像这样的对 [Education Id]:[Education Name] 。例如:( 1:'Diploma',2:'M.S.',... )(我只是用它来获取一次教育数据，并没有使用 UrlData ) (是的，我在 ASP.Net MVC 3 中使用它，但这不是重点)

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

谢谢。

Answer 1

我这样解决了我的问题:

1. 首先，我处理 beforeSearch 事件:

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

2. 这是 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 中，我首先获取发布数据并解析它。之后，我搜索索引不等于名称的列，并查找这些列是否有任何过滤器。如果有任何列，我用索引替换字段。 最后我设置了发布数据。通知数据使用 JSON.stringify 转换为 JSON，您可以找到它 here .

我使用此函数通过下拉列表过滤数据(使用下拉列表项的值而不是文本)