JsGrid 排序不适用于自定义列

Question

排序功能将不再适用于使用 itemTemplate 和 headerTemplate 的列。

您可以从 here 中看到一个 fiddle。

如您所见，在 "Client ID" 列中，排序效果非常好。但是在 "Client Name" 列上，排序不起作用，因为我使用 itemTemplate 和 headerTemplate 进行自定义。

非常感谢任何解决方法。

代码如下：

$("#jsGrid").jsGrid({
    width: "100%",
    sorting: true,
    paging: true,
    data: [{
            ClientId: 1,
            Client: "Aaaa Joseph"
        },
        {
            ClientId: 2,
            Client: "Zzzz Brad"
        },
        {
            ClientId: 3,
            Client: "Mr Nice Guy"
        }
    ],
    fields: [{
            width: 80,
            name: "ClientId",
            type: "text",
            title: "Client ID"
        },
        {
            width: 80,
            itemTemplate: function(value, item) {
                return "<div>" + item.Client + "</div>";
            },
            headerTemplate: function() {
                return "<th class='jsgrid-header-cell'>Client Name</th>";
            }
        },
    ]
});

Answer 1

在jsgrid name is a property of data item associated with the column. And on header click this _sortData function will call in jsgrid.js中对数据进行排序。这个 name 配置将在这里使用。因此，为此您必须提供此配置，否则它会空白并且 header 单击时不会进行数据排序。

请在jsgrid.js

中搜索以下功能

_sortData: function() {
    var sortFactor = this._sortFactor(),
        sortField = this._sortField;

    if (sortField) {
        this.data.sort(function(item1, item2) {
            return sortFactor * sortField.sortingFunc(item1[sortField.name], item2[sortField.name]);
        });
    }
},

在上面的代码中 sortField.name 作为列配置，它必须是强制性的。

演示

$("#jsGrid").jsGrid({
        width: "100%",
        sorting: true,
        paging: true,
     data: [
         { ClientId : 1, Client: "Aaaa Joseph"},
          { ClientId : 2, Client: "Zzzz Brad"},
          { ClientId : 3, Client: "Mr Nice Guy"}        
        ],
        fields: [
          {
              width: 80,
       name: "ClientId",
              type: "text",
              title: "Client ID"
          },
          {
              width: 80,
              name:'Client',
              itemTemplate: function (value, item) {    
                  return "<div>"+item.Client+"</div>";
              },
              headerTemplate: function () {
                  return "<th class='jsgrid-header-cell'>Client Name</th>";
              }
          },          
        ]
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>

<div id="jsGrid"></div>

Another way you can make manually sorting on header click.

JsGrid 排序不适用于自定义列

JsGrid Sorting Not working on Customized column

javascript

sorting

jsgrid