将TreeView中的复选框与使用远程数据源的复选框绑定 [英] Binding checkboxes in treeview with checkboxes that uses remote datasource

问题描述

让我在这里布置一个情况.我有一种情况，我需要在表单上显示几个复选框，这些复选框本质上是分层的，即其中一些属于一个类别，而其他属于第二个类别，依此类推.我的第一个想法是将KendoUI树形视图与复选框一起使用. 我对此有几个疑问:

Let me layout a situation here. I have a situation where I need to show several check boxes on a form that are hierarchical by nature in terms that some of them belong to one category and other belong to a second and so on. My first idea was to use KendoUI treeview with check boxes. I have several questions in relations to this:

1. 显然，在某些情况下，在表单加载时，需要选中某些复选框，因为它们就像来自数据源一样.当我定义新的kendo.data.HierarchicalDataSource时，有一个属性可以让我指定数据源中定义层次结构的哪个属性"ParentID"，另一个可以通知特定项目是否有任何子项目"hasChildren".我看不到是否有一个称为已检查"的属性，或者是否有某种允许以相同方式与数据源正确绑定的属性. 存在吗?我该如何设置?
2. 提供第一个问题的答案是否定的，到目前为止，我所做的是手动检查treeview的dataBound事件中的各个复选框，如下所示:

    $(e.node).find(":checkbox[isselected='true']").prop("checked", true);

这是通过检查节点中的复选框，并检查它们是否具有称为"isselected"的属性(我使用复选框模板来填充)，以及是否将该属性设置为true，然后检查复选框.这可以正常工作，但是当我想将复选框发送回服务器时会发生问题.通过上面的代码选择的复选框不会反映在树视图的数据源中.现在，我必须弄清楚该如何做.我在徘徊是否有一个更优雅的解决方案，而不是我使用的方法:手动选中复选框->每个复选框上的fire事件以更新其'isselected'属性或treeview数据源->在发布值时获取所有的检查值.

What this does is go through the check boxes in the node and checks if they have an attribute called 'isselected' (which I fill by using a check box template) and if that one is set to true then check that check box. This works as it should but the problem happens when I want to post the checked boxes back to the server. The check boxes selected through above code are not reflected in the treeview's datasource. Now I have to figure out on how to do that. I was wandering if there was a more elegant solution to this instead of the approach I am using: manually check the check boxes -> fire event on every check box to update its 'isselected' attribute or treeview datasource -> on posting values get all of the checked values.

感谢您的帮助.

推荐答案

在等待有人提供智能解决方案的同时，让我补充一下我发现的内容，以便使它起作用，这样我可以帮助那些碰碰运气的人针对相同的问题.

While waiting for somebody with a smart solution for this, let me add what I have found out in order to get this working so I could help people who bump up against the same problems.

请查看以下 KendoUI论坛帖子，并由KendoUI团队的Atanas回答，他在其中解释了如何获取数据源项目并在其中标记具有适当属性的特定项目.这对于在用户更改特定复选框的选择后手动更新数据源很有用.

Please look at the following KendoUI forum post and answer by Atanas from KendoUI team in which he explains how to get to the data source item and mark particular item in there with proper property. This was useful in order to manually update the data source after the user changes choices at particular check boxes.

还要查看以下

Also take a look at the following KendoUI forum post for explanation on how to properly structure your check box template so it could properly POST back.

有了这两个技巧，我就可以将选中的复选框的ID重新发布回控制器.现在，执行此操作的视图侧JavaScript代码总数约为80行，其中包括模型定义.虽然这还不算太多，但是如果有人可以推荐一种更聪明的方法，那仍然是太多了.

With these two tips I was able to get the IDs of checked check boxes POSTed back to the controller. The total JavaScript code on view side that does this is now around 80 lines of code including model definition. While this is not too much it is still way too much if there is a smarter way somebody can recommend.

这篇关于将TreeView中的复选框与使用远程数据源的复选框绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！