jsTree动态创建节点，解决创建不了节点问题

本文主要是介绍jsTree动态创建节点，解决创建不了节点问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

官方文档

https://www.jstree.com.cn/

js动态创建节点不成功的原因

主要是配置没有设置check_callback，默认是false，需要配置返回true，才可以创建节点

<link href="/jstree/themes/default/style.min.css?v=2021-02-08-1" rel="stylesheet" />
<script src="/lib/jquery/dist/jquery.min.js?v=2021-02-08-1"></script>
<script src="/jstree/jstree.min.js"></script><div id="tree_div" class="demo" lay-ignore></div>


!function(){$('#tree_div').jstree({'core': {//不支持多选false，多选为true"multiple": false,'data': {//请求后台url"url": '/department/add',//提交的参数"data": function (node) {return { "id": node.id };}},'check_callback': function (operation, node, node_parent, node_position, more) {// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node' or 'edit'// in case of 'rename_node' node_position is filled with the new node name// return operation === 'rename_node' ? true : false;//确定当用户尝试修改树的结构时会发生什么情况。//如果 false创建，重命名，删除，移动或复制之类的所有操作，则将被阻止。//您可以将其设置 true 为允许所有交互，或使用功能进行更好的控制。//需要创建节点，请将设置改为truereturn true;},//出错'error': function (r) {console.log("**************error**********");console.log(r);}}           }).on("select_node.jstree", function (event, node) {//选中一个节点触发//console.log(event);//console.log(node);$("#txtDepartment").val(node.node.text);$("#txtSno").val(node.node.original.m_sno);if (node.node.original.m_status == 1) {$("input[name=status_dp][value=1]").click();             } else {$("input[name=status_dp][value=0]").click();}layui.form.render();});function save() {var arrId = $('#tree_div').jstree().get_top_selected();if (arrId.length == 0) {showMsg('请选中一个节点');return false;}var txtDepartment = $("#txtDepartment").val();//var txtParentId = $("#txtParentId").val();var txtParentId = '';var txtSno = $("#txtSno").val();var status = $("input[name='status_dp']:checked").val();//操作类型，var data_type = $("input[name='data_type']:checked").val();if (txtDepartment=="") {showMsg('部门名称不可为空');return;}//var departmentId = $("#departmentId").val();var departmentId = arrId[0];var url = p.addUrl;if (data_type == "edit") {//修改url = p.updateUrl;}else if (data_type == "child") {//父级idtxtParentId = departmentId;}var fm = {Id: departmentId,Department_name: txtDepartment,Parent_id: txtParentId,Sno: txtSno,d_status: status};console.log('发送参数');console.log(fm);$.ajax({url: url,type: "post",data: fm,success: function (r) {if (r.code == 200) {showMsg(r.msg);//测试成功；创建节点//$.jstree.reference('#tree_div').create_node('父节点id', { id: '创建节点id', text: '武松', icon: "jstree-file" });//创建一个节点if (data_type == 'child') {//新增下级$.jstree.reference('#tree_div').create_node(txtParentId, { id: r.data.id, text: txtDepartment, icon: "jstree-file", m_sno: r.data.sno, m_status: r.data.d_status });}else if (data_type == 'same') {//获取父节点id//$.jstree.reference('#tree_div').get_parent('44fb104497134ecea551cbef6176543d');var parentId = $.jstree.reference('#tree_div').get_parent(departmentId);//新增同级$.jstree.reference('#tree_div').create_node(parentId, { id: r.data.id, text: txtDepartment, icon: "jstree-file", m_sno: r.data.sno, m_status: r.data.d_status });}else if (data_type == 'edit') {//编辑节点名称//rename_node$.jstree.reference('#tree_div').rename_node(departmentId, txtDepartment);}						 } else {showAlert(r.msg);}//setTimeout(function () { location.reload(); }, 2000);}});}
}();

后台返回json格式

children 如果有下级，则设置true，没得设置为false，这个会影响有没有展开的图标
icon是设置节点图标的
id是节点id
text节点名称

[{"id":"740fc4db0d664d20b9c27a7cb200e969","text":"翰林院","children":true,"icon":"","m_sno":1,"m_status":1},{"id":"6c876b4974b34259bc3b89c2e5ca484d","text":"门下省","children":true,"icon":"","m_sno":10000,"m_status":1},{"id":"069906775b2d4ef382d5e4f689f68037","text":"职能部门","children":true,"icon":"","m_sno":99900,"m_status":1}]