jstree创建无限分级树的方法【基于ajax动态创建子节点】

欢迎来到本站，本文将详细讲解如何使用jstree创建无限分级树及基于ajax动态创建子节点的方法。

jstree创建无限分级树的方法

jstree是一款基于JQuery的树形控件，具有多种功能和配置项，包括创建无限分级树。我们可以通过以下步骤来创建一个无限分级树。

步骤1：引入相关文件

在页面中引入jstree的相关文件，包括jquery、jstree的css和js文件。可以通过以下代码示例引入。

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

步骤2：创建树结构

在页面中创建一个div元素，通过jquery选择器选中这个元素，然后通过jstree()方法创建树结构，如下所示：

<div id="tree"></div>
<script>
  $('#tree').jstree();
</script>

步骤3：配置树结构

通过在jstree()方法中传入一些配置项来配置树结构，例如设置数据源、展开节点等，如下所示：

<div id="tree"></div>
<script>
  $('#tree').jstree({
    'core' : {
      'data' : [
        { 'text' : '节点1' },
        { 'text' : '节点2' },
        { 'text' : '节点3' }
      ],
      'themes':{
          'responsive': false
      }
    },
    'plugins' : ['search', 'state', 'types', 'wholerow', 'checkbox', 'themes','json_data', 'ui']
  });
</script>

步骤4：渲染树结构

通过在页面中调用jstree()方法并传入配置项，就可以成功渲染出一棵树结构。

<div id="tree"></div>
<script>
  $('#tree').jstree({
    'core' : {
      'data' : [
        { 'text' : '节点1' },
        { 'text' : '节点2' },
        { 'text' : '节点3' }
      ],
      'themes':{
          'responsive': false
      }
    },
    'plugins' : ['themes']
  });
</script>

基于ajax动态创建子节点

我们还可以通过ajax动态创建子节点。在展开一个节点时，通过异步请求数据，然后根据数据动态添加子节点。下面通过代码示例让大家了解如何使用ajax动态创建子节点。

步骤1：配置数据源

通过ajax请求数据，返回json格式的树节点数据。

{
  "id" : "44",
  "text" : "节点4",
  "children" : true
}

步骤2：配置树结构

在jstree()方法中通过ajax配置项中设置url和data属性来获取数据。在请求数据时，可以带上节点的id参数，用来返回指定节点的子节点数据。

<div id="tree"></div>
<script>
  $('#tree').jstree({
    'core' : {
      'data' : [
        { 'text' : '节点1' },
        { 'text' : '节点2' },
        { 'text' : '节点3' }
      ],
      'themes':{
          'responsive': false
      }
    },
    'plugins' : ['themes','json_data'],
    'json_data': {
        'ajax': {
            'url': '/get_tree_data',
            'dataType': 'json',
            'data': (node) => {
                return { 'id': node.id };
            }
        }
    }
  });
</script>

步骤3：实现ajax接口

编写后端代码处理ajax请求，返回json格式的树节点数据。在例子中，我使用了PHP编写了一个简单的接口来返回节点数据。

public function getTreeData() {
    $parent_id = $_GET['id'] ? $_GET['id'] : '#';
    $data = array(
        array(
            'id' => $parent_id . '_1',
            'text' => '节点' . $parent_id . '_1',
            'children' => true
        ),
        array(
            'id' => $parent_id . '_2',
            'text' => '节点' . $parent_id . '_2',
            'children' => true
        ),
        array(
            'id' => $parent_id . '_3',
            'text' => '节点' . $parent_id . '_3',
            'children' => false
        )
    );
    echo json_encode($data);
}

最后，通过以上步骤的实现，我们就可以创建一个带有无限层级和动态加载子节点的树形控件了。

代码运行样例：

参考文献：

jstree官网：https://www.jstree.com/