劍道網格中的數據按順序消失

Question

在有角度的應用程序中，我有一個頁面，該頁面根據從http請求中檢索的數據顯示幾個Kendo網格。 數據作為json返回。

這是在成功檢索數據時執行的功能。 它在控制器內，而ctrl是控制器范圍內的“ this”對象。 Moment是一個用於管理日期的JavaScript庫。 它唯一要做的就是將日期（MM / DD / YYYY）和時間（hh：mm A）格式化為字符串。

function (data) {
    ctrl.dateGroups = {};
    var currentDate = '';
    data.Data.forEach(function (item) {
        item.Date = item.StartDateTime ? moment(item.StartDateTime).format(HC_APP_CONFIG.dateFormat) : '';
        item.ClockInTime = item.StartDateTime ? moment(item.StartDateTime).format(HC_APP_CONFIG.timeFormat) : '';
        if ( angular.isEmpty(item.EndDateTime) ||
            item.EndDateTime === '' ||
            item.EndDateTime.format(HC_APP_CONFIG.dateFormat).match(HC_APP_CONFIG.badLocalDatePattern) !== null ){
            item.ClockOutTime = '';
            item.EndDateTime = '';
        } else {
            item.ClockOutTime = moment(item.EndDateTime).format(HC_APP_CONFIG.timeFormat);
        }
        var currentDate = 'd'+item.Date;
        if (ctrl.dateGroups.hasOwnProperty(currentDate) &&
            ctrl.dateGroups[currentDate].length > 0) {
            ctrl.dateGroups[currentDate].push(item);
        } else {
            ctrl.dateGroups[currentDate] = [item];
        }
    });
}

該函數（成功地）獲取每個返回的項目，並將其作為以日期命名的數組的一部分放入對象中，這樣，例如，從1月14日開始的所有項目都以一個數組結尾，而在1月15日以另一個數組結尾，依此類推。

這將顯示在具有以下循環的頁面中：

<div class="col-sm-12" ng-repeat="(key,value) in punchList.dateGroups">
    <h2 class="punch-heading">{{key.substring(1)}}</h2>
    <div hc-grid id="grid-{{key}}"></div>
</div>

結果是一系列網格，每個網格對應一個日期，並包含該日期的所有項目。 再次成功。

網格配置：

gridConfig = {
    uiOptions: {},
    autoBind: false,
    sortable: {
        mode: 'single'
    },
    height: 'auto',
    columnMenu: false,
    filterable: false,
    dataSource: {
        type: 'json',
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: HC_APP_CONFIG.defaultPageSize,
        schema: {
            data: 'Data',
            total: 'TotalCount',
            model: {
                id: 'ShiftId',
                fields: {
                    EmployeeName: {
                        type: 'string'
                    },
                    EmployeeCode: {
                        type: 'string'
                    },
                    JobName: {
                        type: 'string'
                    },
                    ClockIn: {
                        type: 'string'
                    },
                    ClockOut: {
                        type: 'string'
                    }
                }
            }
        }
    },
    columns: [
        {
            field: 'EmployeeName',
            title: 'Name',
            sortable: false
        },
        {
            field: 'EmployeeCode',
            title: 'Employee Code',
            sortable: false
        },
        {
            field: 'JobName',
            title: 'Job',
            sortable: false
        },
        {
            field: 'ClockInTime',
            title: 'Clock In'
        },
        {
            field: 'ClockOutTime',
            title: 'Clock Out'
        }
    ]
}

問題是當我按Clock In或Clock Out列（唯一可排序的列）進行排序時。 此時，網格結構（分頁指示器，列標題等）保持原樣，但數據消失了。

我正在使用Kendo UI v2015.1.429

Answer 1

Kendo UI網格通過內置的AJAX系統支持直接的服務器交互，以進行API調用。 似乎設置serverSort:true可能會告訴Kendo UI網格刪除當前數據模型，並向服務器查詢新排序的數據（它期望服務器提供）。 由於您沒有使用與網格的直接服務器交互，因此可能會刪除該模型，但無法獲得新模型。

有一個sortable:true選項，可能是客戶端對現有數據進行排序所需要的。

鏈接到Kendo UI網格服務器端排序文章