【问题标题】:KO Grid - repeating valueKO Grid - 重复值
【发布时间】:2016-08-22 07:35:27
【问题描述】:

在我的一个观点中,我有一个带有 KOGrid 的 ASP.Net MVC 站点。这通过对控制器进行 Ajax 调用来提取数据,然后控制器通过 EF 从 SQL Server 中进行选择。我的数据表如下:

我的 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 }
    ];

我有以下网格选项:

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 开发者工具的以下截屏中可以看出,这个 observable 已正确填充:

我的问题是 - 显示时,显示的日期都是当前机器的日期时间 - 与从 ajax 调用中检索到的数据无关,如下所示:

谁能看看我哪里出错了?

【问题讨论】:

  • 您能否将moment(data).format('DD/MM/YYYY h:mm a') 登录到您的cellFilter definition for KO Grid 以查看每次迭代的日期
  • 我每次迭代都得到相同的时间

标签: javascript knockout.js kogrid


【解决方案1】:

您的代码中有错字,在您的列 def 中您有 'Timestamp' 大写为 T,但您的属性名为 timestamp

所以修复很简单:

{ width: 150, field: 'timestamp', displayName: 'Timestamp', cellFilter: function (data) { return moment(data).format('DD/MM/YYYY h:mm a') } },

为什么会出现这种奇怪的行为:

  • KoGrid 不会检查您是否提供了有效的 field 名称,在这种情况下,它会将 undefined 作为 data 参数传递给 cellFilter 函数
  • 如果您在没有有效日期的情况下调用 moment 函数,则默认为当前时间,这就是您所有列显示相同时间的原因

【讨论】:

  • 再次感谢@nemesv 并感谢您解释为什么会出现这种奇怪的行为。只是因为你的帮助,我才坚持使用 kogrid(因为对 javascript 几乎一无所知),现在我的网站需要维护的代码比我在 Razor 视图中拥有所有标记时要少得多。
猜你喜欢
  • 2013-03-15
  • 2015-01-14
  • 2023-03-22
  • 2020-08-27
  • 1970-01-01
  • 2017-06-17
  • 2022-12-15
  • 2014-04-09
  • 1970-01-01
相关资源
最近更新 更多