解决 jstree 中 Uncaught TypeError: Cannot read property 'state' of undefined 报错

最新推荐文章于 2024-10-16 17:41:40 发布

molaifeng

最新推荐文章于 2024-10-16 17:41:40 发布

阅读量1.7w

点赞数 3

分类专栏： Javascript

本文链接：https://blog.csdn.net/molaifeng/article/details/80542070

版权

Javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

之前后台使用 jstree 做权限控制，于是此次语音后台的权限也移植过来了，但在使用时遇到了麻烦。

这里写图片描述

如上图，北京信息有限公司one 做为集团公司，旗下有两家子公司，子公司的权限来源于平台授予给集团公司的权限，也就造成了 jstree 渲染时，数据结构不一样。

// 添加权限
$(document).on('click', '.addrole', function() {
    $("#tree_2").data('jstree', false).empty().jstree({
        "core" : {
            "themes" : {
                "responsive": false
            },
            "check_callback" : true,
            'data' : {
                'url' : '/url/' + $(this).attr('data-id')
            }
        },
        "types" : {
            "default" : {
                "icon" : "fa fa-folder icon-state-warning icon-lg"
            },
            "file" : {
                "icon" : "fa fa-file icon-state-warning icon-lg"
            }
        },
        "plugins" : ["checkbox"]
    });
});

上面的代码是之前的平台的，我以为只需把对应的示例数据给清理掉再渲染就可以了。但看官方文档发现，需要使用对应的 $.jstree.destroy () 来显示清除树的结构，否则，即使之前清除了数据，但还是之前的树。由于子公司的权限要小于集团公司的，于是变会出现下图的报警。

这里写图片描述

解决的方法只需在清除树前加上此 $('#tree_2').jstree("destroy"); 即可

// 添加权限
$(document).on('click', '.addrole', function() {
  $('#tree_2').jstree("destroy");
  $("#tree_2").data('jstree', false).empty().jstree({
      "core" : {
          "themes" : {
              "responsive": false
          },
          "check_callback" : true,
          'data' : {
              'url' : '/url/' + $(this).attr('data-id')
          }
      },
      "types" : {
          "default" : {
              "icon" : "fa fa-folder icon-state-warning icon-lg"
          },
          "file" : {
              "icon" : "fa fa-file icon-state-warning icon-lg"
          }
      },
      "plugins" : ["checkbox"]
  });
});