Kendo TreeView懒加载问题排查：子节点展开图标缺失

核心问题总结 #

问题由字段大小写不匹配、懒加载逻辑未对接数据源规范两个核心原因导致，以下是具体排查和修复方案：

1. 修复hasChildren字段大小写不匹配 #

Kendo UI的HierarchicalDataSource对字段名大小写敏感：

• 你的JSON模型中标记节点是否有子节点的字段是HasChildren（首字母大写）
• 但代码中schema.model配置的是hasChildren: "hasChildren"（全小写）

这直接导致TreeView无法识别父节点存在子节点，因此不显示展开图标。

修改代码：

var kendoTreeData = new kendo.data.HierarchicalDataSource({
    data: [jsonDataParent],
    schema: {
        model: {
            children: "subCategories",
            hasChildren: "HasChildren" // 改为和JSON一致的大写开头字段名
        }
    }
});

2. 确认父节点初始标记正确 #

由于父JSON的subCategories为空，必须确保每个需要懒加载的父节点都正确设置HasChildren: true，TreeView才会显示展开图标。检查你的父JSON生成逻辑，确保该属性已正确传递。

3. 优化懒加载逻辑（expand事件） #

当前expand事件直接操作DOM的方式不符合Kendo数据源规范，且存在重复加载风险，应通过数据源API添加子节点：

修改expand事件代码：

expand: function (e) {
    var item = this.dataItem(e.node);
    // 避免重复加载
    if (!item.loaded && item.HasChildren) {
        var subitems = fillSubItems(item);
        // 通过数据源添加子节点
        item.children.data(subitems);
        item.set("loaded", true); // 标记已加载
    }
}

4. 修正fillSubItems函数逻辑 #

你的fillSubItems中存在数组访问错误，根据提供的JSON结构，jsonDataChild.subCategories的每个元素是单个对象而非数组，应调整：

var fillSubItems = function (dataItem) {
    var items = [];
    var subCat = jsonDataChild.subCategories;
    var parentId = dataItem.id.split('-')[0];
    for (var i = 0; i < subCat.length; i++) {
        // 直接访问subCat[i]的treeNodeId，而非subCat[i][0]
        if (parentId == subCat[i].treeNodeId) {
            items.push(subCat[i]);
        }
    }
    return items;
}

5. 调整TreeView初始化逻辑 #

避免expand事件中使用未完全初始化的treeview变量，建议在事件中用this指代当前TreeView实例（如上述修改），确保上下文正确。

最终验证点 #

• 父节点HasChildren属性为true
• schema.model.hasChildren配置与JSON字段名完全一致
• 懒加载通过数据源API添加子节点，而非直接操作DOM

内容的提问来源于stack exchange，提问作者Mhd