jsTree重新加载通常在做数据绑定时候，需要对jsTree重新渲染所有节点，达到重新加载数据的效果。

下面做一个示例：

  1. 初始化一个节点
  2. 监听input的输入值为1后，让jsTree重新加载
  3. jsTree重新渲染所有节点，并且改变为2个节点

一、引入jsTree组件

引入样式

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

引入jQuery

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

引入JS

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

二、jsTree重新加载

初始化节点，input为1时操作节点后重新渲染jstree

// 1. 初始化默认数据
            var select_node = ['child-1-1']

            // 2. 定义函数方法
            var jsTreeStart = function() {
              // =================== 默认展开 ===================
              $('#jstree3').jstree({
                // 插件
                plugins: ['checkbox'],
                checkbox: {
                  // 选中样式：背景样式
                  keep_selected_style: false
                },
                core: {
                  // 允许回调
                  check_callback: true,
                  icon: false, // 隐藏图标
                  themes: {
                    icons: false
                  },
                  // 数据
                  data: [{
                    id: 'p-1',
                    parent: '#',
                    text: 'parent-1'
                  },
                  {
                    id: 'child-1-1',
                    parent: 'p-1',
                    text: 'child-1-1'
                  },
                  {
                    id: 'child-1-2',
                    parent: 'p-1',
                    text: 'child-1-2'
                  },
                  {
                    id: 'p-2',
                    parent: '#',
                    text: 'parent-2'
                  },
                  {
                    id: 'child-2-1',
                    parent: 'p-2',
                    text: 'child-2-1'
                  },
                  {
                    id: 'child-2-2',
                    parent: 'p-2',
                    text: 'child-2-2'
                  }
                  ]
                }
              })

              // 所有节点加载完成后触发
              $('#jstree3').on('ready.jstree', function(e, data) {
                // 默认选择节点
                $('#jstree3').jstree('select_node', select_node)

                // 默认展开/打开全部
                $('#jstree3').jstree().open_all()

                // 定义默认选择节点
                var defaultNode = $('#jstree3').jstree(true).get_selected(true)

                // 打印输出默认选择节点
                console.log(defaultNode)
              })

              // 选择更改时触发
              $('#jstree3').on('changed.jstree', function(e, data) {
                // console.log(data.selected);
              })
            }

            // 3. 执行初始化渲染
            jsTreeStart()

            // 4. 监听变化，操作选中节点
            $('.input').bind('input propertychange', function() {
              var input = $('.input').val()
              console.log(input)

              // 为1时操作选中节点
              if (input === '1') {
                // 选中节点
                select_node = ['child-1-1', 'child-2-2']
                // 销毁初始化
                $.jstree.destroy()
                // 重新渲染
                jsTreeStart()
              } else {
                // 选中节点
                select_node = ['child-1-1']
                // 销毁初始化
                $.jstree.destroy()
                // 重新渲染
                jsTreeStart()
              }
            })

相关文章：jsTree默认展开、收起。