1

我正在使用 MVC 4、Web API 和 Kendo UI 控件构建一个网站。

在我的页面上，我使用 Kendo UI Listview 来过滤我的网格。我正在尝试将“ALL”选项添加为列表视图中的第一项。

这是列表视图：

var jobsfilter = $("#jobfilter").kendoListView({
            selectable: "single",
            loadOnDemand: false,
            template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
            dataSource: filterDataSource,
            change: function (e) {
                var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
                if (dataItem.FilterId !== 0) {
                    var $filter = new Array();
                    $filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
                    jgrid.dataSource.filter($filter);
                } else {
                    jgrid.dataSource.filter({});
                }
            }
        });

这是我的数据源：

 var filterDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "api/Filter"
                }
            },
            schema: {
                model: { id: "FilterId" }
            }
        });

我尝试了几种不同的方法来实现这一点：

  • 如果我将它附加到一个按钮上，我可以让它工作 - 但是当数据加载时我需要它。
  • 如果我将它添加到列表视图的dataBound事件中，它会导致数据绑定事件进入循环并将项目添加到一堆 (IE) 或终止浏览器 (firefox)。添加 preventDefault 什么也没做。
  • 我已经阅读了在数据源的读取参数中添加一个函数的内容，但我认为这根本不是正确的地方。

根据我所阅读的内容，我认为我应该能够在 listview 的 dataBound 事件中做到这一点，并且我的实现不正确。这是添加了 dataBound 事件的列表视图，它使我的浏览器 (Firefox) 崩溃 - 或向列表视图 (IE) 添加了大约 50 个“全部”项目。

var jobsfilter = $("#jobfilter").kendoListView({
            selectable: "single",
            loadOnDemand: false,
            template: "<div class='pointercursor' id=${FilterId}>${FilterName}</div>",
            dataSource: {
                transport: {
                    read: {
                        url: "api/Filter"
                    }
                }
            },
            dataBound: function (e) {
                var dsource = $("#jobfilter").data("kendoListView").dataSource;
                dsource.insert(0, { FilterId: 0, FilterName: "All" });
                e.preventDefault();
            },
            change: function (e) {
                var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
                if (dataItem.FilterId !== 0) {
                    var $filter = new Array();
                    $filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
                    jgrid.dataSource.filter($filter);
                } else {
                    jgrid.dataSource.filter({});
                }
            }
        });

任何帮助将不胜感激。

4

1 回答 1

2

为什么不将它添加到服务器端？无论如何，如果您想在 中进行dataBound，只需检查它是否存在，如果不存在则仅添加：

dataBound: function (e) {
    var dsource = this.dataSource;
    if (dsource.at(0).FilterName !== "All") {
        dsource.insert(0, {
            FilterId: 0,
            FilterName: "All"
        });
    }
},

作为对您所看到的问题的解释：您正在创建一个无限循环，因为在数据源中插入一个元素将触发 change 事件，并且列表视图将再次刷新并绑定（并因此触发dataBound）。

您还可以将其封装在自定义小部件中：

(function ($, kendo) {
    var ui = kendo.ui,
        ListView = ui.ListView;

    var CustomListView = ListView.extend({
        init: function (element, options) {
            // base call to widget initialization
            ListView.fn.init.call(this, element, options);

            this.dataSource.insert(0, {
                FilterId: 0,
                FilterName: "All"
            });
        },

        options: {
            name: "CustomListView"
        }
    });

    ui.plugin(CustomListView);
})(window.jQuery, window.kendo);
于 2014-04-30T17:23:20.373 回答