在很多情况下,需要在页面加载完成后,将某些节点设置为选中,选中的子节点id可能从Url通过参数传入,也可能通过某种方式从后台传入,还有可能是作为服务器变量在页面初始化时直接写入。Kendo UI TreeView相关的数据结构中有checked 属性,该属性表示相关节点的checkbox是否选中,因此,我们可以在获取节点数据后,为相关的节点数据设置checked属性,实现缺省选中。示例代码如下:
var dataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: function (options) {
$.ajax({
url: this.root + action,
data: postdata,
type: "post",
dataType: "json",
success: function (res) {
setCheck(res);
return options.success(res);
},
error: function (XMLHttpRequest) {
return options.error(XMLHttpRequest);
}
});
}
},
schema: {
model: {
id: "Id",
children: "Nodes",
hasChildren: "HasChildren"
}
}
});
function setCheck(nodes) {
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var id = "," + node.Id + ",";
if (selectedItems.indexOf(id) >= 0) {
node.checked = true;
}
setCheck(node.Nodes);
}
}
代码中selectedItems中保存了用逗号分割的id值。
如果缺省选中的数据是从服务器获取的,那么在返回的数据中,需要有标识选中的字段,缺省的字段名称是checked,如果返回的字段名称不是checked,可以在schema中进行映射:
schema: {
model: {
id: "Id",
children: "Nodes",
hasChildren: "HasChildren",
fields: {
checked: {from: "Checked", type: "boolean"}
}
}
}
上面的代码中,将Checked映射到checked。