javascript - JsGrid 排序不适用于自定义列

Question

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

你可以看到来自 here 的 fiddle .

正如您所看到的，在“客户端 ID”列中，排序效果非常好。但在“客户名称”列上，排序不起作用，因为我使用 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 名称是与列关联的数据项的属性。在标题上单击此 _sortData 函数将在 jsgrid.js 中调用用于对数据进行排序。这个name配置将在这里使用。因此，为此，您必须提供此配置，否则它将显示为空白，并且在标题单击时不会进行数据排序。

请在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.