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 為允許所有互動，或使用功能進行更好的控制。
					
                    //需要建立節點，請将設定改為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格式

children 如果有下級，則設定true，沒得設定為false，這個會影響有沒有展開的圖示

icon是設定節點圖示的

id是節點id

text節點名稱