简体   繁体   English

剑道网格中的数据按顺序消失

[英]data within kendo-grid disappears on sort

In an angular app I have a page that displays several Kendo-grids based on the data retrieved from an http request. 在有角度的应用程序中,我有一个页面,该页面根据从http请求中检索的数据显示几个Kendo网格。 The data comes back as json. 数据作为json返回。

This is the function that executes on successful data retrieval. 这是在成功检索数据时执行的功能。 This is within a controller, and ctrl is the "this" object on the controller scope. 它在控制器内,而ctrl是控制器范围内的“ this”对象。 Moment is a JavaScript library for managing dates. Moment是一个用于管理日期的JavaScript库。 The only thing it's doing here is formatting as strings the date (MM/DD/YYYY) and the time (hh:mm A). 它唯一要做的就是将日期(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];
        }
    });
}

The function (successfully) takes each returned item and puts it into an object as part of arrays named after the date, so that all items from Jan 14th, for example, end up in one array, and another for Jan 15th, etc. 该函数(成功地)获取每个返回的项目,并将其作为以日期命名的数组的一部分放入对象中,这样,例如,从1月14日开始的所有项目都以一个数组结尾,而在1月15日以另一个数组结尾,依此类推。

This displays in the page with this loop: 这将显示在具有以下循环的页面中:

<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>

The result is a series of grids, each corresponding to a date and containing all the items for that date. 结果是一系列网格,每个网格对应一个日期,并包含该日期的所有项目。 This again, is successful. 再次成功。

The grid configuration: 网格配置:

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'
        }
    ]
}

The problem is when I sort by the Clock In or Clock Out columns (the only sortable columns). 问题是当我按Clock In或Clock Out列(唯一可排序的列)进行排序时。 At this point, the grid structure (pagination indicator, column heads, etc) remain in tact but the data disappears. 此时,网格结构(分页指示器,列标题等)保持原样,但数据消失了。

I'm using Kendo UI v2015.1.429 我正在使用Kendo UI v2015.1.429

Kendo UI grids support direct server interaction via a built-in AJAX system for making API calls. Kendo UI网格通过内置的AJAX系统支持直接的服务器交互,以进行API调用。 It appears that setting serverSort:true may tell the Kendo UI grid to drop the current data model and query the server for newly sorted data (which it expects the server to provide). 似乎设置serverSort:true可能会告诉Kendo UI网格删除当前数据模型,并向服务器查询新排序的数据(它期望服务器提供)。 Since you are not using direct server interaction with the grid, it probably drops the model but then has no way to get a new one. 由于您没有使用与网格的直接服务器交互,因此可能会删除该模型,但无法获得新模型。

There is a sortable:true option that may be what you need for client side sorting of the existing data. 有一个sortable:true选项,可能是客户端对现有数据进行排序所需要的。

Link to Kendo UI grid server-side sorting article 链接到Kendo UI网格服务器端排序文章

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM