KO Grid-重复价值 [英] KO Grid - repeating value
问题描述
在我的一个视图中，我有一个带有KOGrid的ASP.Net MVC网站.这通过向控制器进行Ajax调用来提取数据，然后该控制器通过EF从SQL Server中进行选择.我的数据表如下所示:
我的KO网格具有以下列定义:
self.columnDefs = [
{ width: 50, field: 'workflowTask_WorkflowTaskId', displayName: 'Id' },
{ width: 150, field: 'Timestamp', displayName: 'Timestamp', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },
{ width: 100, field: 'currentState', displayName: 'Crnt State' },
{ width: 500, field: 'note', displayName: 'Notes' },
{ width: 100, field: 'previousState', displayName: 'Prev State' },
{ width: 100, field: 'currentUser', displayName: 'Crnt User', sortable: false },
{ width: 100, field: 'amendedByUser', displayName: 'Amnd By', sortable: false },
{ width: 100, field: 'previousUser', displayName: 'Prev User', sortable: false }
];
我有以下网格选项:
self.gridOptions = {
data: self.recs,
columnDefs: self.columnDefs,
autogenerateColumns: false,
showGroupPanel: true,
canSelectRows: false,
showFilter: true,
filterOptions: self.filterOptions,
enablePaging: true,
pagingOptions: self.pagingOptions,
sortInfo: self.sortInfo,
rowHeight: 35
};
我有一个可观察的数组来保存要在kogrid中显示的数据:
self.recs = ko.observableArray([]);
这由以下javascript函数填充:
self.get = function () {
$loadingIndicator.show();
$.ajax({
url: BASE_URL + 'TaskHistory/GetRecords',
type: 'get',
data: {
'page': self.pagingOptions.currentPage(),
'pageSize': self.pagingOptions.pageSize(),
'filter': self.filterOptions.filterText == undefined ? '' : self.filterOptions.filterText(),
'sort': self.sortInfo().column.field + ' ' + self.sortInfo().direction
},
contentType: 'application/json; charset=utf-8',
success: function (data) {
self.pagingOptions.totalServerItems(data.RecCount);
var recsArray = [];
$.each(data.PageOfRecords, function (key, value) {
recsArray.push(
new Task(value.WorkflowTaskHistoryId,
value.Timestamp,
value.PreviousState,
value.CurrentState,
value.AmendedByUser,
value.Note,
value.PreviousUser,
value.CurrentUser,
value.WorkflowTask_WorkflowTaskId));
});
self.recs(recsArray);
}
});
$loadingIndicator.hide();
};
从以下Chrome开发工具屏幕抓取中可以看出，此观察项已正确填充:
我的问题是-显示时，显示的日期都是当前机器的日期时间-与从ajax调用中检索到的数据无关，如下所示:
任何人都可以看到我哪里出了问题吗?
您的代码中有一个错字，在列def中您有带有大写字母T的'Timestamp'，但是您的属性称为timestamp./p>
因此修复非常简单:
{ width: 150, field: 'timestamp', displayName: 'Timestamp', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },
为什么这种奇怪的行为:
- KoGrid不会检查您是否提供了有效的
field名称，在这种情况下，它会将未定义的值作为data参数传递给cellFilter函数 - 如果在没有有效日期的情况下调用
moment函数，则默认为当前时间，这就是为什么所有列都显示相同时间的原因
I have an ASP.Net MVC site with a KOGrid in one of my views. This pulls data by making an Ajax call to a controller which then selects from SQL Server via EF. My data table can be seen below:
I have the following column definition for my KO Grid:
self.columnDefs = [
{ width: 50, field: 'workflowTask_WorkflowTaskId', displayName: 'Id' },
{ width: 150, field: 'Timestamp', displayName: 'Timestamp', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },
{ width: 100, field: 'currentState', displayName: 'Crnt State' },
{ width: 500, field: 'note', displayName: 'Notes' },
{ width: 100, field: 'previousState', displayName: 'Prev State' },
{ width: 100, field: 'currentUser', displayName: 'Crnt User', sortable: false },
{ width: 100, field: 'amendedByUser', displayName: 'Amnd By', sortable: false },
{ width: 100, field: 'previousUser', displayName: 'Prev User', sortable: false }
];
I have the following grid options:
self.gridOptions = {
data: self.recs,
columnDefs: self.columnDefs,
autogenerateColumns: false,
showGroupPanel: true,
canSelectRows: false,
showFilter: true,
filterOptions: self.filterOptions,
enablePaging: true,
pagingOptions: self.pagingOptions,
sortInfo: self.sortInfo,
rowHeight: 35
};
I have an observable array to hold the data to be displayed in the kogrid:
self.recs = ko.observableArray([]);
This is populated by the following javascript function:
self.get = function () {
$loadingIndicator.show();
$.ajax({
url: BASE_URL + 'TaskHistory/GetRecords',
type: 'get',
data: {
'page': self.pagingOptions.currentPage(),
'pageSize': self.pagingOptions.pageSize(),
'filter': self.filterOptions.filterText == undefined ? '' : self.filterOptions.filterText(),
'sort': self.sortInfo().column.field + ' ' + self.sortInfo().direction
},
contentType: 'application/json; charset=utf-8',
success: function (data) {
self.pagingOptions.totalServerItems(data.RecCount);
var recsArray = [];
$.each(data.PageOfRecords, function (key, value) {
recsArray.push(
new Task(value.WorkflowTaskHistoryId,
value.Timestamp,
value.PreviousState,
value.CurrentState,
value.AmendedByUser,
value.Note,
value.PreviousUser,
value.CurrentUser,
value.WorkflowTask_WorkflowTaskId));
});
self.recs(recsArray);
}
});
$loadingIndicator.hide();
};
As can be seen in the following screen grab from Chrome Developer tools, this observable is correctly populated:
My problem is - when displayed, the date shown are all for the current machine datetime - not related to the data retrieved from the ajax call, as shown below:
Can anyone see where I went wrong please?
You have a typo in your code, in your column def you have 'Timestamp' with a capital T but your property is called timestamp.
So the fix is very simple:
{ width: 150, field: 'timestamp', displayName: 'Timestamp', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },
Why the strange behavior:
- the KoGrid does not check that you provide a valid
fieldname and in this case it passes undefined to thecellFilterfunction as thedataparameter - if you call
momentfunction without a valid date it defaults to the current time, that is why all your columns show the same time
这篇关于KO Grid-重复价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
