ztree父子节点

<link rel="stylesheet" href="../ztree3.5/zTreeStyle/zTreeStyle.css">
<script src="../ztree3.5/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="../ztree3.5/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="../ztree3.5/js/jquery.ztree.exhide-3.5.js"></script>
 

<div id="tree" class="ztree-cotent" style="text-align: center;">
         <div class="zTreeDemoBackground left">
                <ul id="treeMultiple" class="ztree" style="height: 300px; width:150px; overflow-y: auto"></ul>
          </div>
 </div>

let ids2;

$(document).ready(function() {
    tree2()	
})

function tree2 () {
	let setting = {
		check: {
			enable: true,
			chkStyle: "checkbox",
			chkboxType: { "Y": "", "N": "" }
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onCheck: zTreeOnCheck
		}
	};
	let zNodes;
	$.ajax({
		type : "post",
		url : Globe.Url.findDeptByParentUrl,
		dataType : 'json',
		data:{
			supDeptId:Globe.Basic.supDeptId
		},
		async : false,
		success : function(data) {
			$.fn.zTree.init($("#treeMultiple"), setting, toTree(data.rows));
			$('#clear2').click(()=> {
				let treeObj = $.fn.zTree.getZTreeObj("treeMultiple");
				treeObj.checkAllNodes(false);
				$("#tree2").val("")
				ids2 = ""
			})
			$("#get2").click(()=> {
				console.log("tree2get:", ids2)
			})
		}
	});

}
function zTreeOnCheck(event, treeId, treeNode){
	let userTreeObj=$.fn.zTree.getZTreeObj("treeMultiple");
	let userNodes=userTreeObj.getCheckedNodes(true);
	let ids= userNodes.filter(function (v, i) {
		return v.id !== "";
	}).map(function (v, i) {
		return v.id;
	}).join(",")
	let names = userNodes.filter(function (v, i) {
		return v.id !== "";
	}).map(function (v, i) {
		return v.name;
	}).join(";")
	$('#tree2').val(names)
	ids2 = ids
}
function toTree(data) {
	let result = []
	let root = []
	if (!Array.isArray(data)) {
		return result
	}
	data.forEach(item => {
		delete item.children;
	});
	data.forEach(item => {
		result.push({
			id: item.deptId,
			pId: item.disCode * 1,
			name: item.deptName
		})
		root.push({
			id: item.disCode * 1,
			pId: 0,
			name: item.disId,
			nocheck: true
		})
	});
	let obj = {};
	root = root.reduce((cur, next) => {
		obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
		return cur;
	}, [])
	result.push(...root) // 合并数组
	console.log(result)
	return result;
}

数据格式化

因为是从后台请求的数据，数据格式有差别，所以转换为这种

oldarr = [
    {
        deptId: number
        deptName: string
        disCode: string
        disId: string
    }
]

newarr = [
    {
        id: number,
        pId: number,
        name: string,
        nocheck: boolean // 是否没有复选框
    }, {
        id: number,
        pId: number,
        name: string,
        nocheck: boolean
    }
]

父子节点不联动

chkboxType: { "Y": "", "N": "" }

Y 属性定义 checkbox 被勾选后的情况；
N 属性定义 checkbox 取消勾选后的情况；
"p" 表示操作会影响父级节点；
"s" 表示操作会影响子级节点。

请注意大小写，不要改变