剑道ui网格过滤数据源使用mvvm

Question

我想只使用声明性语句而不是 js 来构建剑道网格。

我还想在声明性语句本身中通过数据源应用“过滤器”。如果剑道网格的 data-bind 属性中存在可用选项，则可能。

请帮忙解决一下 jsfiddle

Answer 1

这里是jsFiddle DEMO，说明使用 Kendo 网格和使用 MVVM 进行过滤。

以下是演示中的代码 sn-p：

HTML：

<div data-role="grid"
                 data-filterable="true"            
                 data-editable="true"
                 data-toolbar="['create', 'save']"
                 data-columns="[
                                 { 'field': 'ProductName', 'width': 270 },
                                 { 'field': 'UnitPrice' },
                              ]"
                 data-bind="source: products,
                            visible: isVisible,
                            events: {
                              save: onSave
                            }"
                 style="height: 200px"></div>

JS：

var viewModel = kendo.observable({
        isVisible: true,
        onSave: function(e) {
            kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
        },
        products: new kendo.data.DataSource({
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" }
                    }
                }
            },
            batch: true,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/products",
                    dataType: "jsonp"
                },
                update: {
                    url: "https://demos.telerik.com/kendo-ui/service/products/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/products/create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            }
        })
    });
    kendo.bind($("#example"), viewModel);