树形图插件jstree

写在前面

最近赶项目,里面有这样的一个需求,从后台获取到json以后,将数据写成树的形式

pic.png

网上找了jstree插件

安装及使用

<link href="css/plugins/jsTree/style.min.css" rel="stylesheet">
<script src="js/plugins/jsTree/jstree.min.js"></script>

下载到本地,引入.没什么说的

初始化

//html
<div id="data-tree"></div>
//js
$.ajax({
    type:"get",
    url:"",
    async:true,
    success:function(data){
        if(data){
             var treeDataObj = formatTreeData(data.children);
             $('#data-tree').jstree(
                    {
                        'core': {
                            'data': treeDataObj
                        },
                        "plugins": ["search"]//添加搜索功能
                    }
                );
        }
    }
});

这些都没什么,主要是这个格式化数据弄的我脑阔疼,jstree的数据要求一般是这种格式

 'core' : {
      'data' : [
        { "text" : "Root node", "children" : [
            { "text" : "Child node 1" },
            { "text" : "Child node 2" }
          ]
        }
      ]
    }

请求到的数据不是这种格式,这时候需要修改,每一层都要加上text id等属性,这时候需要循环一下

        var formatTreeData = function (data) {
            var result = data instanceof Array ? [] : {};
            for (var i in data) {
                if (typeof data[i] == 'object') {
                    result[i] = formatTreeData(data[i]);
                } else {
                    result.id = data.classId;
                    result.text = data.className;
                    result.icon = 'fa fa-reorder';
                    result.type = 'Field';
                }
              }
           return result;
           }

还得需要判断最后一层,并且区分开有数据的(这个实在是不怎么会)

点击节点

  $('#data-tree').on('select_node.jstree', function (selected, selectedNode) {
       // selected:选中的标签
       //selectedNode:选中的标签存储的数据
  });

搜索功能

$("#data-tree").jstree(true).search($("#searchTreeInput").val());

暂时用到的就这些 其他的请移步https://blog.csdn.net/qq_24472595/article/details/70053863