Official document
Reasons for unsuccessful js dynamic node creation
The main reason is that the check_callback is not set in the configuration , and the default is false. You need to configure to return true before you can create a node.
<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 为允许所有交互，或使用功能进行更好的控制。
//需要创建节点，请将设置改为true
return 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") {
//父级id
txtParentId = 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);
}
});
}
}();
Backend return json format
If children have subordinates, set true, not set to false, this will affect whether there is an expanded icon
icon is to set the
id of the node icon is the node id
text node name
[{
"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}]
