BootStrap Jstree 树形菜单的增删改查的实现源码

下面是 BootStrap Jstree 树形菜单的增删改查的实现源码的完整攻略。

前置知识

在学习本篇攻略之前，需要对以下知识有所了解：

• HTML、CSS、JavaScript 的基本语法和使用
• jQuery 和 Bootstrap 框架的基本使用
• jstree 树形菜单插件的基本使用

环境搭建

首先，需要在你的项目中引入以下依赖：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jstree/3.3.7/themes/default/style.min.css">

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/jstree/3.3.7/jstree.min.js"></script>

实现增、删、改、查

初始化树形菜单

首先，需要将 jstree 插件绑定到一个 HTML 元素上，即可得到初始化后的树形菜单：

<div id="demo"></div>

<script>
$("#demo").jstree({
    'core': {
        'data': [
            {
                'text': 'Folder 1',
                'state': { 'opened': true },
                'children': [
                    { 'text': 'Subfolder 1', 'icon': 'glyphicon glyphicon-folder-open' },
                    { 'text': 'Subfolder 2', 'icon': 'glyphicon glyphicon-folder-open' }
                ]
            },
            {
                'text': 'Folder 2',
                'state': { 'opened': true },
                'children': [
                    { 'text': 'Subfolder 3', 'icon': 'glyphicon glyphicon-folder-open' },
                    { 'text': 'Subfolder 4', 'icon': 'glyphicon glyphicon-folder-open' }
                ]
            }
        ]
    },
    'plugins': ['contextmenu']
});

// 添加右键菜单
$("#demo").on('select_node.jstree', function (e, data) {
    $("#demo").jstree('show_contextmenu', data.node);
});
</script>

增加节点

要在 jstree 中增加节点，需要调用 jstree 提供的 create_node 方法：

$('#demo').jstree('create_node', $('#nodeId'), {
    text: 'New Node',
});

其中，create_node 方法的第一个参数是一个 jQuery 对象，表示新增节点要插入到哪个节点下；第二个参数是一个对象，表示新增节点的配置信息，其中 text 属性表示节点显示的文本值。

获取节点

可以通过以下两种方法获取 jstree 中的节点：

// 通过 ID 获取节点
const node = $('#demo').jstree('get_node', '节点 ID');

// 获取所有节点
const nodes = $('#demo').jstree('get_json', -1);

其中，get_node 方法的第二个参数是节点的 ID，表示要获取哪个节点的信息。get_json 方法的第二个参数是根节点的 ID，如果传入 -1，则表示获取根节点下的所有节点信息。

更新节点

要更新 jstree 中的节点，需要调用 jstree 提供的 rename_node 方法：

$('#demo').jstree('rename_node', $('#nodeId'), 'New Node Text');

其中，rename_node 方法的第一个参数是一个 jQuery 对象，表示要更新的节点；第二个参数是新的节点文本值。

删除节点

要删除 jstree 中的节点，需要调用 jstree 提供的 delete_node 方法：

$('#demo').jstree('delete_node', $('#nodeId'));

其中，delete_node 方法的第二个参数是一个 jQuery 对象，表示要删除的节点。

示例说明

示例一：树形菜单添加父节点和子节点

下面是一个树形菜单添加父节点和子节点的示例：

<div id="demo"></div>

<script>
const treeData = [
    {
        'text': 'Folder 1',
        'state': { 'opened': true },
        'children': [
            { 'text': 'Subfolder 1', 'icon': 'glyphicon glyphicon-folder-open' },
            { 'text': 'Subfolder 2', 'icon': 'glyphicon glyphicon-folder-open' }
        ]
    },
    {
        'text': 'Folder 2',
        'state': { 'opened': true },
        'children': [
            { 'text': 'Subfolder 3', 'icon': 'glyphicon glyphicon-folder-open' },
            { 'text': 'Subfolder 4', 'icon': 'glyphicon glyphicon-folder-open' }
        ]
    }
];

$("#demo").jstree({
    'core': {
        'data': treeData
    },
    'plugins': ['contextmenu']
});

// 添加右键菜单
$("#demo").on('select_node.jstree', function (e, data) {
    $("#demo").jstree('show_contextmenu', data.node);
});

// 添加父节点
$('#addParentNode').on('click', function () {
    const tree = $('#demo').jstree(true);
    const newNode = { 'text': 'New Parent' };
    const selectedNode = tree.get_selected();
    const parentNode = selectedNode.length > 0 ? selectedNode[0] : '#';
    tree.create_node(parentNode, newNode, "first");
});

// 添加子节点
$('#addChildNode').on('click', function () {
    const tree = $('#demo').jstree(true);
    const newNode = { 'text': 'New Child' };
    const selectedNode = tree.get_selected();
    const parentNode = selectedNode.length > 0 ? selectedNode[0] : '#';
    tree.create_node(parentNode, newNode, "last");
});
</script>

<button id="addParentNode" class="btn btn-default">添加父节点</button>
<button id="addChildNode" class="btn btn-default">添加子节点</button>

示例二：树形菜单编辑节点和删除节点

下面是一个树形菜单编辑节点和删除节点的示例：

<div id="demo"></div>

<script>
const treeData = [
    {
        'id': '1',
        'text': 'Folder 1',
        'state': { 'opened': true },
        'children': [
            { 'id': '2', 'text': 'Subfolder 1', 'icon': 'glyphicon glyphicon-folder-open' },
            { 'id': '3', 'text': 'Subfolder 2', 'icon': 'glyphicon glyphicon-folder-open' }
        ]
    },
    {
        'id': '4',
        'text': 'Folder 2',
        'state': { 'opened': true },
        'children': [
            { 'id': '5', 'text': 'Subfolder 3', 'icon': 'glyphicon glyphicon-folder-open' },
            { 'id': '6', 'text': 'Subfolder 4', 'icon': 'glyphicon glyphicon-folder-open' }
        ]
    }
];

$("#demo").jstree({
    'core': {
        'data': treeData
    },
    'plugins': ['contextmenu']
});

// 添加右键菜单
$("#demo").on('select_node.jstree', function (e, data) {
    $("#demo").jstree('show_contextmenu', data.node);
});

// 编辑节点
$('#editNode').on('click', function () {
    const tree = $('#demo').jstree(true);
    const selectedNode = tree.get_selected();
    const node = tree.get_node(selectedNode);
    tree.edit(node);
});

// 删除节点
$('#deleteNode').on('click', function () {
    const tree = $('#demo').jstree(true);
    const selectedNode = tree.get_selected();
    const node = tree.get_node(selectedNode);
    tree.delete_node(node);
});
</script>

<button id="editNode" class="btn btn-default">编辑节点</button>
<button id="deleteNode" class="btn btn-default">删除节点</button>

结语

以上就是 BootStrap Jstree 树形菜单增删改查的实现源码的完整攻略，希望对大家有所帮助。