剑道-在选择网格单元格时更新另一个网格(mvvm)

Kendo - on select of a grid's cell update another grid (mvvm)

本文关键字：网格 另一个 mvvm 更新 单元格 选择 剑道      更新时间：2023-09-26

我有这两个基本网格(http://jsbin.com/zofoje)，在一个网格中选择行后，另一个网格应相应地更新(例如:在第二个网格中应显示所选员工的订单):

<div id="view1" style="width: 30rem; float: left">
  <div data-role="grid" id="grid1"
     data-columns="[
                   { 'field': 'EmployeeID'}
                   ]"
     data-selectable="true"
     data-bind="source: dataSource, events: {change: onGrid1Select}"
     >
  </div>


    <div data-role="grid" id="grid2" 
     data-columns="[
                   { 'field': 'EmployeeID'},
                   { 'field': 'OrderID'}
                   ]"
     data-bind="source: dataSource"
     >
    </div>

我试着用2个视图模型来做，我想要干净地访问第二个网格的运输动作。然而，我没有得到任何地方与我的尝试:

var viewModel1 = kendo.observable({
  selectedEmployeeID: 1,
  dataSource: new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: {
        url: "http://demos.kendoui.com/service/Northwind.svc/Employees"  
      }
    },
    schema: {
      model: {
        id: "EmployeeID"
      }
    },
  }),
  onGrid1Select: function(e){
    var grid1 = $("#grid1").data("kendoGrid");
    var model = grid1.dataItem(grid1.select());
    this.set("selectedEmployeeID", model.EmployeeID);
    console.log("selectedEmployeeID: ", this.get("selectedEmployeeID"));
  }
})

var viewModel2 = kendo.observable({
  dataSource: new kendo.data.DataSource({
    type: "odata",
    transport: {
      read: {
        url: "http://demos.kendoui.com/service/Northwind.svc/Orders"  
      }
    },
    filter: {
      field: "EmployeeID", 
      operator: "eq", 
      value: viewModel1.get("selectedEmployeeID")
    },
    schema: {
      model: {
        id: "OrderID"
      }
    },
  }) 
}) 

    kendo.bind($("#view1"), viewModel1);
    kendo.bind($("#view2"), viewModel2);

我在这里看到一个类似的例子，虽然它不是mvvm，但它与本地数据http://jsfiddle.net/scaillerie/UbeXn/1/一起工作。在我的例子中，我将如何更新第二个网格的数据源?

dataSource Filter不监听任何变量的变化，这些变量可能被用来设置它的参数。它基本上只是在它被设置的时候获取这些值的快照。如果您想根据新值过滤数据源，则需要重做过滤器。

在你的onGrid1Select函数中添加这样的东西应该可以达到这个效果:

viewModel2.get("dataSource").filter({field: "EmployeeID", operator: "eq", value: this.get("selectedEmployeeID")});
相关文章：