如何在结果表中仅显示选定的记录
Posted
技术标签:
【中文标题】如何在结果表中仅显示选定的记录【英文标题】：How to display only selected records in the result table 【发布时间】：2014-03-25 19:33:35 【问题描述】：有两个表使用相同的源。这些表使用剑道模板的源绑定。目前这两个表的来源是employees。这两个表都显示相同的数据。
现在，我们需要修改它以在结果表中只显示复选框选中的记录。此外，当用户单击结果表上的删除按钮时，应取消选中部分表中的复选框。
我们需要做哪些修改才能使其在MVVM 中工作？
头
<head>
<title>MVVM Test</title>
<script type="text/javascript" src="lib/kendo/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/kendo/js/kendo.web.min.js"></script>
<!----Kendo Templates-->
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td><button type="button" data-bind="click: deleteEmployee">Delete</button></td>
</tr>
</script>
<script id="selection-table-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<input type="checkbox" name="selection" value="a">
</td>
</tr>
</script>
<!--MVVM Wiring using Kendo Binding-->
<script type="text/javascript">
$(document).ready(function ()
kendo.bind($("body"), viewModel);
);
</script>
</head>
MVVM
<script type="text/javascript">
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 - e.g. 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);
);
</script>
身体
<body>
<table id="selectionTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody data-template="selection-table-template" data-bind="source: employees">
</tbody>
</table>
<br />
<hr />
<table id="resultTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</thead>
<!--The data-template attribute tells Kendo UI that the employees objects should be formatted using a Kendo UI template. -->
<tbody data-template="row-template" data-bind="source: employees">
</tbody>
</table>
</body>
参考文献
-
set method - ObservableObject - Kedo API Reference
set method - kendo Model - Kedo API Reference
Filtering source in a Kendo Template
Kendo-UI grid Set Value in grid with Javascript
【问题讨论】：
参考：jsfiddle.net/Lijo/4ZMdA/5 参考：***.com/questions/20246885/… 【参考方案1】：首先要做的事情。
如果在删除对象时将其从 viewModel 中删除，它也会从源表中删除。如果您希望它是您描述的方式，您将需要两个数组来处理它。但根据你问题的第一部分，我想我会发布一个解决方案。
html
<script id="row-template" type="text/x-kendo-template">
<tr data-bind="visible: isChecked">
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<button type="button" data-bind="click: deleteEmployee">Delete</button>
</td>
</tr>
</script>
<script id="selection-table-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
</td>
</tr>
</script>
<table id="selectionTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="selection-table-template" data-bind="source: employees"/>
</table>
<br />
<hr />
<table id="resultTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: employees"/>
</table>
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
Fiddle
总结
在“row-template”中使用data-bind="visible: isChecked"，只显示底部表格中的选定记录。
将复选框模板设为
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
在删除函数中，使用如下
employee.set('isChecked', false);
【讨论】：
如果我单击底部表格中的“删除”按钮，则顶部表格中只应取消选中。但是现在该记录正在从***表格中消失。我们该如何解决？ 删除你的拼接语句。 对不起，代替employee.isChecked = false;它应该是employee.set('isChecked', false); 感谢您删除评论，并用您想要的内容和小提琴更新了答案。祝你好运！ 它和小提琴一样出现在我的屏幕上。嗯，不确定，但我必须回去工作。【参考方案2】：使用字典存储[employee, boolean] 存储员工和复选框状态，并将字典绑定到视图
查看this
【讨论】：
以上是关于如何在结果表中仅显示选定的记录的主要内容，如果未能解决你的问题，请参考以下文章
Access 2010 中 1:M Join 的左表中仅显示唯一记录