jsTree默认展开、收起，默认选中教材示例

jsTree默认展开、收起，默认选中教材示例：

一、引入jsTree组件

引入样式

<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.9/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默认展开与默认收起代码示例：

1. 默认展开

2. 默认收起

// =================== 1. 默认展开 ===================
            $('#jstree1').jstree({
            // 插件
            'plugins': ["checkbox"],
            "checkbox": {
            // 选中样式：背景样式
            "keep_selected_style": false,
            },
            'core': {
            // 允许回调
            "check_callback": true,
            // 数据
            '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",
            }]
            }
            });

            // 所有节点加载完成后触发
            $('#jstree1').on("ready.jstree", function(e, data) {

            // 默认选中节点
            $('#jstree1').jstree('select_node', ['child-1-1', 'child-2-2']);

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

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

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

            // 去选所有节点
            // $("#jstree1").jstree('deselect_all');

            // 定义当前选中节点
            // var currentNode = $('#jstree1').jstree(true).get_selected(true);

            // 打印输出当前选中节点
            // console.log(currentNode)

            });

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

            // =================== 2. 默认收起 ===================
            $('#jstree2').jstree({
            // 插件
            'plugins': ["checkbox"],
            "checkbox": {
            // 选中样式：背景样式
            "keep_selected_style": false,
            },
            'core': {
            // 允许回调
            "check_callback": true,
            // 数据
            '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",
            }]
            }
            });

            // 所有节点加载完成后触发
            $('#jstree2').on("ready.jstree", function(e, data) {

            // 默认选择节点
            $('#jstree2').jstree('select_node', ['child-1-1', 'child-2-2']);

            // 默认关闭/收起宣布
            $('#jstree2').jstree().close_all();

            });

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

三、注意

无论是默认展开、收起、选中，都需要放到 ready.jstree 中执行。