var jsonDataParent = @Html.Raw(Model.TrailerModelTreeViewModel.JsonTreeDataBrand); var jsonDataChild = @Html.Raw(Model.TrailerModelTreeViewModel.JsonTreeDataModel); var kendoTreeData = new kendo...
var jsonDataParent = @Html.Raw(Model.TrailerModelTreeViewModel.JsonTreeDataBrand);
var jsonDataChild = @Html.Raw(Model.TrailerModelTreeViewModel.JsonTreeDataModel);
var kendoTreeData = new kendo.data.HierarchicalDataSource({
data: [
jsonDataParent
],
schema: {
model: {
children: "subCategories",
hasChildren: "hasChildren"
}
}
});
function treeDataBound() {
var selectedValues = '@Model.SearchFilterViewModel.SelectedItems';
if (selectedValues != "")
{
var selectedNodes = selectedValues.split(",");
if (selectedNodes.length > 0) {
$("#treeview input[type=checkbox]").each(function (e) {
var checkboxId = $(this).attr("value");
if (selectedNodes.indexOf(checkboxId.toString()) > -1) {
if ($(this).is(":checked") == false) {
$(this).click();
setTimeout(function () {
onCheck();
}, 1);
}
}
});
}
}
}
var fillSubItems = function (dataItem) {
var items = [];
var subCat = jsonDataChild.subCategories;
for (i = 0; i < subCat.length; i++)
{
if (dataItem.id.split('-')[0] == subCat[i][0].treeNodeId) {
items.push(subCat[i])
}
}
return items
}
$("#treeview").kendoTreeView({
checkboxes: {
template: "<input type='checkbox' name='checkedFiles[#= item.id #]' value='#=
item.id #' aria-label='#= item.id #'/>",
checkChildren: true
},
dataBound:treeDataBound,
dataSource: kendoTreeData,
loadOnDemand: true,
dataTextField: ["categoryName", "subCategoryName"],
expand: function (e)
{
var item = treeview.dataItem(e.node);
setTimeout(function () {
var subitems = fillSubItems(item);
treeview.children.data(subitems);
}, 500);
}
});
var treeview = $("#treeview").data("kendoTreeView");
$($("#treeview input[type=checkbox]").first()[0]).hide();
setTimeout(function () {
$('#treeview').data('kendoTreeView').collapse("ul li :not(:eq(0))");
}, 1);
treeview.dataSource.bind("change", function (event) {
runAlready = false;
if (event.field == "checked")
onCheck();
});
由于数据量巨大,我需要在 Kendo TreeView 中实现延迟加载。父节点和子节点分别存储在两个不同的 JSON 对象中。但是,目前只显示父节点复选框,子节点的展开图标不可见。有人能帮忙找出此代码中的问题吗?
JSON format:-
{
"categoryName": "Brand Model",
"treeNodeId": "0-0",
"subCategories": [
{
"subCategoryName": "Brand1",
"treeNodeId": "",
"id": "1996-0",
"subCategories": [
{
"subCategoryName": "UNKNOWN",
"treeNodeId": "1996",
"id": "2812-1996",
"subCategories": "",
"expanded": true,
"checked": false,
"HasChildren": false
}
],
"expanded": true,
"checked": false,
"HasChildren": true
},
{
"subCategoryName": "Brand2",
"treeNodeId": "",
"id": "1208-0",
"subCategories": [
{
"subCategoryName": "UNKNOWN",
"treeNodeId": "1208",
"id": "2232-1208",
"subCategories": "",
"expanded": true,
"checked": false,
"HasChildren": false
}
],
"expanded": true,
"checked": false,
"HasChildren": true
}
]
}
Json Model:-
jsonModel.Add(new
{
subCategoryName = Model.Brand,
treeNodeId = string.Empty,
id = Model.MakeSK + "-0",
subCategories = subCat,
expanded = true,
@checked = isChecked,
HasChildren = true
});
对于父 Json 对象,subCategories(子节点数据)为空。