将树视图中的复选框与使用远程数据源的复选框绑定 [英] 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. 假设第一个问题的答案是否定的，到目前为止我所做的是手动检查树视图的 dataBound 事件中的各个复选框，如下所示:

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

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

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.

另外看看下面的KendoUI 论坛帖子 解释如何正确构建复选框模板，以便它可以正确回帖.

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.

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