Kendo ui使用mvvm的網格過濾器數據源

Question

我想僅使用聲明性語句而不是js來構建kendo網格。

我也想在聲明性語句本身中通過數據源應用「過濾器」。可能的是，如果在劍道網格的data-bind屬性中有可用的選項。

請用的jsfiddle

Answer 1

下面是使用MVVM劍道網格的jsFiddle DEMO示出使用具有過濾幫助。

下面是演示代碼片段：

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);