公式文書
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 为允许所有交互，或使用功能进行更好的控制。
//需要创建节点，请将设置改为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);
}
});
}
}();
バックエンドはjson形式を返します
子に部下がいる場合、falseに設定せず、trueに設定します。これは、展開されたアイコン
アイコンがあるかどうかに影響します。
ノードアイコンのIDを設定します。ノードID
テキストノード名
[{
"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}]
