使用jstree构建树形结构报reading 'children'类型错误如何解决

这个报错是jstree解析节点结构时，找不到对应父节点或节点属性不符合要求，导致内部操作children属性时报错，针对你的代码修复方案如下：

后台代码修复 #

1. 修正根节点父ID判断逻辑：你当前直接对ParentId做ToString后判空，如果ParentId是数值类型（比如int默认值为0），ToString后结果为"0"不为空，会导致根节点的父ID没有被正确赋值为#，jstree无法识别根节点就会报错。
2. 修正节点文本空值逻辑：不要将空的节点文本赋值为#，会干扰jstree的节点识别，空值给默认展示文本即可。
3. 序列化前将查询结果转为List：避免EF延迟加载导致序列化出异常结构。

修正后代码：

public ActionResult GetTreeData()
{
    var birimList = _ouListesiService.FindParentOUs();

    var nodes = birimList.Select(t => new JsTreeModel
    {
        id = t.Id.ToString(),
        // 请根据你实际ParentId的类型调整判断逻辑，示例为ParentId是int类型、根节点ParentId为0的场景
        parent = t.ParentId == 0 ? "#" : t.ParentId.ToString(),
        // 空文本给默认值，不要赋值为#
        text = String.IsNullOrEmpty(t.ChildDescription) ? "未命名节点" : t.ChildDescription,
        disabled = false,
        icon = "font-yellow-crusta fa fa-folder"
    }).ToList(); // 必须转成List再序列化

    return Json(nodes, JsonRequestBehavior.AllowGet);
}

前端代码修复 #

1. core配置新增check_callback: true：jstree做节点挂载、操作时必须开启该配置，否则内部访问children属性会报错。
2. 替换字符串匹配方法：contains方法存在浏览器兼容问题，替换为兼容性更好的includes。
3. 接口请求类型匹配：如果你的后台Action没有加[HttpPost]注解，将请求类型改为GET，避免405权限错误。

修正后核心配置：

$("#birimTree").jstree({
    "plugins": ["state", "dnd", "contextmenu", "changed", "search"],
    "search": {
        "search_callback": function (searchString, node) {
            return node.text.toLocaleLowerCase().includes(searchString.toLocaleLowerCase());
        }
    },
    "core": {
        "check_callback": true, // 必加配置，允许jstree操作节点
        "strings": { "Loading ...": "Birim Hiyerarşisi yükleniyor. Lütfen bekleyiniz ..." },
        "themes": {
            "name": "proton",
            "responsive": true
        },
        "data": {
            "type": "GET", // 后台没加[HttpPost]就用GET请求
            'data': $("#frmAraTree").serializeObject(),
            "url": "@Url.EncryptAction("GetTreeData", "Kullanicilar")"
        }
    },
    // 原contextmenu配置保持不变即可
});

排查验证点 #

• 打开浏览器控制台网络面板，确认GetTreeData接口返回的是正常的节点数组，没有重复ID、没有找不到对应父节点的无效子节点
• 确认你引入的jstree依赖完整，没有缺少jquery依赖或jstree样式文件

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