如何仅显示结果表中的选定记录

有两个表使用相同的源。 这些表使用了kendo模板的源绑定。 目前，这两个表的来源都是employees 。 这两个表都显示相同的数据。

现在，我们需要修改它以仅显示结果表中的复选框选定记录。 此外，当用户单击结果表上的删除按钮时，应在节表中取消选中该复选框。

我们需要做些什么修改才能使它在MVVM ？

头

          Delete              $(document).ready(function () { kendo.bind($("body"), viewModel); });   

MVVM

   var viewModel = kendo.observable({ // model definition employees: [ { name: "Lijo", age: "28" }, { name: "Binu", age: "33" }, { name: "Kiran", age: "29" } ], personName: "", personAge: "", //Note: Business functions does not access any DOM elements using jquery. //They are referring only the objects in the view model. //business functions (uses "this" keyword - eg this.get("employees")) addEmployee: function () { this.get("employees").push({ name: this.get("personName"), age: this.get("personAge") }); this.set("personName", ""); this.set("personAge", ""); }, deleteEmployee: function (e) { //person object is created using "e" var person = e.data; var employees = this.get("employees"); var index = employees.indexOf(person); employees.splice(index, 1); } });  

身体

  
 
 
 
 Name 
 
 Age 
 
 
 
 
 
 
 
 
 
 
 
 Name 
 
 Age 
 
 
  
 
 
  

参考

1. set方法 – ObservableObject – Kedo API参考
2. set method – kendo Model – Kedo API Reference
3. 过滤剑道模板中的来源
4. Kendo-UI网格使用Javascript设置网格中的值

Answer 1

首先要做的事情。

如果在删除对象时从viewModel中删除该对象，它也将从源表中删除。 如果您希望它是您描述的方式，则需要两个数组来处理此问题。 但根据你问题的第一部分，我想我会发布一个解决方案。

HTML

   
 
 
 
Name
 
Age
 
 
 
 
 
 
 
 
 
 
Name
 
Age
 
 
 
  

JAVASCRIPT

 var viewModel = kendo.observable({ employees: [ { name: "Lijo", age: "28", isChecked: true }, { name: "Binu", age: "33", isChecked: true }, { name: "Kiran", age: "29", isChecked: true } ], personName: "", personAge: "", addEmployee: function () { this.get("employees").push({ name: this.get("personName"), age: this.get("personAge") }); this.set("personName", ""); this.set("personAge", ""); }, deleteEmployee: function (e) { var person = e.data; var employees = this.get("employees"); var index = employees.indexOf(person); var employee = employees[index]; //set employee.set('isChecked', false); } }); $(document).ready(function () { kendo.bind($("body"), viewModel); }); 

的jsfiddle

小提琴

摘要

在“row-template”中使用data-bind="visible: isChecked"仅显示底部表中的选定记录。

为复选框制作模板

在删除function中，使用以下内容

  employee.set('isChecked', false); 

Answer 2

使用字典存储[employee，boolean]来存储员工和复选框状态，并将字典绑定到视图

检查一下