jstree使用【一】初次使用_jstree init-优快云博客

本文链接：https://blog.youkuaiyun.com/ruby113028/article/details/51939676

本文介绍如何配置和使用jstree组件来创建异步加载的车辆树。包括引入必要的CSS和JS文件、设置HTML元素及编写初始化方法。详细解释了核心配置项如数据加载URL、数据类型等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步 引入需要本地引入的可去官方地址下载源码
1.style.min.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

2.jquery.min.js


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

3.jstree.min.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

第二步在需要加载jsTree的Html位置处加入

  <div id="jstree_vehicle"></div>

第三步写jstree的调用方法


    function treeInit(data) {
        $('#jstree_vehicle').jstree({
            'core': {
                'data': {
                    'url': COMMON.fenbiaoPath + "singleVehicleTrack.queryEntVehicleGroupVehicleTreeInfo.action",
                    'dataType': "json",
                    'data': function (node) {
                        return {'vehicleMaster': node.id, 'index': node.type, 'tokenStr': COMMON.token};
                    }
                }
            }
        })
    }

这是一颗异步加载的车辆树，
core.data.url:加载时获取数据的地址
core.data.dataType：获取数据的类型
core.data:异步加载结点数据时，需要向后端接口请求的数据时，所需要传给后端的参数。

jstree支持返回接口数据的格式有两种
第一种：嵌套数据的形式

{
  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  children    : []  // array of strings or objects
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}

第二种指定父id的形式。个人更喜欢使用第二种。值得注意的是第二种形式，必须指定父节点，当第一级为更节点时得指定他的父结点为“#”。

{
  id          : "string" // required
  parent      : "string" // required
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : {
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  },
  li_attr     : {}  // attributes for the generated LI node
  a_attr      : {}  // attributes for the generated A node
}