如何在树视图中默认选中复选框

Question

我正在尝试使用复选框设置树视图，并且默认情况下会选中一些复选框，这里是我的数据源值：-

[{"id":12,"Name":"Shirts","hasChildren":false,"Checked":true}
,{"id":13,"Name":"Jeans","hasChildren":false,"Checked":false},
{"id":14,"Name":"Shoes","hasChildren":false,"Checked":true},
{"id":15,"Name":"Apparel accessories","hasChildren":false,"Checked":false}]

和我的查看页面代码：--

                       $(document).ready(function() {
                        $("#category-treeview").kendoTreeView({
                            dataSource: categories,
                            dataTextField: "Name",
                            checkboxes: true
                    });
                });

但是我没有一个复选框被选中，为什么？

有什么建议可以解决这个问题吗？

问候， 维尼特

Answer 1

您的代码基本上是正确的。唯一的问题是Checked 必须是checked（小写）。您的数据如下所示：

var categories = [
    {"id":12,"Name":"Shirts","hasChildren":false,"checked":true},
    {"id":13,"Name":"Jeans","hasChildren":false,"checked":false},
    {"id":14,"Name":"Shoes","hasChildren":false,"checked":true},
    {"id":15,"Name":"Apparel accessories","hasChildren":false,"checked":false}
];

我把你的代码和这个小改动放在这里：http://jsfiddle.net/OnaBai/78k2b/

Answer 2

如果您只需要显示复选框是否被选中，您可以轻松地为该复选框使用模板函数。

checkboxes: {
    template: checkboxTemplate
}

并使用类似的函数

function checkboxTemplate(e) {
  if(e.item.Checked) {
    return "<input type='checkbox' checked='checked' />";
  } 
  else {
    return "<input type='checkbox' />";
  }
}

这种方法的问题是没有发生双向数据绑定。因此，如果您更改了一个复选框，并且他们转储了数据源，则不会反映该更改。

如果您需要双向数据绑定，以便将更改发布回来，您将需要使用一些更复杂的东西。这篇 SO 帖子 (Binding checkboxes in treeview with checkboxes that uses remote datasource) 中的布局非常好。

我已经为此寻找了一个更优雅的答案，因为它看起来很常见，但还没有找到任何东西。