剑道网格中的数据在排序时消失
data within kendo-grid disappears on sort
在一个角度应用程序中,我有一个页面,该页面根据从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'
}
]
}
问题是当我按"上班打卡"或"下班打卡"列(唯一可排序的列)排序时。此时,网格结构(分页指示器、列头等)保持原样,但数据消失。
我正在使用剑道UI v2015.1.429
剑道 UI 网格支持通过内置的 AJAX 系统进行直接服务器交互,以进行 API 调用。设置serverSort:true
似乎可能会告诉 Kendo UI 网格删除当前数据模型并向服务器查询新排序的数据(它希望服务器提供)。由于您没有使用与网格的直接服务器交互,因此它可能会删除模型,但随后无法获取新模型。
sortable:true
选项,可能是客户端对现有数据进行排序所需要的。
链接到剑道 UI 网格服务器端排序文章
相关文章:
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- 使用promise和mongoose对文档进行排序
- Selectize.js:如何对整数值的选项进行排序
- Javascript排序的图像弹出窗口..可以't单独弹出
- 如何通过引用var Using DataTables来进行分页或排序
- facebook”;添加评论“;popup获胜'不要消失
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- 为什么js事件消失了
- JS文件的路径正在消失
- AngularJs对所有页面中的所有记录进行排序
- 当属性不一致时,如何根据属性对JS对象列表进行排序
- 按从高到低对多个int变量进行排序
- jQuery UI可排序-多连接列表拖动
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- Javascript排序字符串或数字
- 剑道网格中的数据在排序时消失
- 当使用jQuery UI可排序时,页边距消失
- 排序或搜索列表时,自定义项将消失
- jQuery DataTable数据在排序后消失
- 引导工具提示在排序表上消失