树视图中的绑定复选框与使用远程数据源的复选框

时间:2013-10-18 07:10:46

标签: kendo-ui kendo-treeview

让我在这里布局一个情况。我有一种情况,我需要在表单上显示几个复选框,这些复选框本质上是分层的,其中一些属于一个类别而另一些属于第二个类,依此类推。我的第一个想法是使用带有复选框的KendoUI树视图。 我对此有几个问题:

  1. 显然会出现在表单加载时需要检查一些复选框的情况,因为它们来自数据源。当我定义新的kendo.data.HierarchicalDataSource时,有一个属性允许我指定数据源中的哪个属性定义层次结构,' ParentID',以及另一个通知特定项目是否有任何子项目的属性' hasChildren&#39 ;.我无法看到是否有一个名为“已检查过”的财产。或者允许以相同方式与数据源正确绑定的东西。 是否存在,如何设置
  2. 如果第一个问题的答案为NO,那么我到目前为止所做的是手动检查treeview的dataBound事件中的个别复选框,如下所示:
  3.     $(e.node).find(":checkbox[isselected='true']").prop("checked", true);
    

    这样做是通过节点中的复选框检查它们是否具有名为' isselected'的属性。 (我使用复选框模板填写)如果那个设置为true,则选中该复选框。这应该工作,但问题发生在我想将选中的框发回服务器时。通过上面的代码选择的复选框不会反映在树形视图的数据源中。现在我必须弄清楚如何做到这一点。如果有一个更优雅的解决方案而不是我正在使用的方法,我正在徘徊:手动检查复选框 - >在每个复选框上触发事件以更新其选中的#39;属性或树视图数据源 - >在过帐值上获取所有选中的值。

    感谢您的帮助。

2 个答案:

答案 0 :(得分:4)

在等待有智能解决方案的人的同时,让我添加我发现的内容以使其正常工作,这样我就可以帮助那些遇到同样问题的人。

请查看以下KendoUI forum post并通过来自KendoUI团队的Atanas回答,其中他解释了如何获取数据源项目并使用适当的属性标记其中的特定项目。这对于在用户更改特定复选框处的选项后手动更新数据源非常有用。

另请查看以下KendoUI forum post有关如何正确构建复选框模板的说明,以便正确回发。

通过这两个提示,我能够将已选中复选框的ID发回给控制器。查看端的JavaScript代码总数大约为80行代码,包括模型定义。虽然这并不是太多,但如果有人能够推荐更聪明的方式,那仍然太过分了。

答案 1 :(得分:1)

嗨,默认情况下,treeview使用名为checked的属性。

所以在你的viewmodel中

public class MenuItemViewModel
{   
   public bool @checked { get; set; }
}

然后,当您从数据库中填充viewmodel时,请确保它返回正确的状态。

enter image description here

如果您不想将check添加到您的viewmodel

然后您可以将其映射到数据源

   dataSource: new kendo.data.HierarchicalDataSource({
          data: kendo.observableHierarchy([]),,
          schema: {
            model: {
              fields: {
                checked: {from: "WHATEVERYOUWANT", type: "boolean"}
              }
            }
          }
        }),
        dataTextField: "Name",
        checkboxes: true

C#viewmodel

  public class MenuItemViewModel
    {   
       public bool WHATEVERYOUWANT { get; set; }
    }