Сортировка JsGrid не работает для настраиваемого столбца - PullRequest
Новая
       1

Сортировка JsGrid не работает для настраиваемого столбца

0 голосов
/ 11 мая 2018

Функция сортировки больше не будет работать со столбцами, использующими itemTemplate и headerTemplate.

Вы можете увидеть скрипку из здесь .

Как видите, в столбце «Идентификатор клиента» сортировка работает очень хорошо. Но в столбце «Имя клиента» сортировка не работает, так как я использую 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>";
            }
        },
    ]
});

1 Ответ

0 голосов
/ 11 мая 2018

In jsgrid name - это свойство элемента данных, связанного со столбцом. А в заголовке нажмите эту _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 в качестве конфигурации столбца, и это обязательно.

DEMO 

$("#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>

Еще один способ сделать сортировку вручную по щелчку заголовка.

...