xm-select下拉树tree实现父子节点关联精准选择
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xm-select Tree</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/xm-select/2.4.0/xm-select.js"></script>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/xm-select/2.4.0/xm-select.css">
</head>
<body>
<select id="tree" xm-select="tree">
</select>
<script>
$(function() {
var data = [
{ id: 1, pid: 0, name: "节点1" },
{ id: 2, pid: 1, name: "节点1-1" },
{ id: 3, pid: 1, name: "节点1-2" },
{ id: 4, pid: 2, name: "节点1-1-1" },
{ id: 5, pid: 2, name: "节点1-1-2" },
{ id: 6, pid: 3, name: "节点1-2-1" },
{ id: 7, pid: 3, name: "节点1-2-2" },
// ...
];
// 初始化xm-select tree
var select = xmSelect.render({
el: '#tree',
data: data,
value: [4],
name: 'tree',
autoRow: true,
direction: 'down'
});
// 根据id和pid进行节点关联
function relateNodes() {
var nodes = select.update('getValue');
if (nodes && nodes[0]) {
var selectedId = nodes[0].value;
var selectedNode = data.find(node => node.id === selectedId);
if (selectedNode) {
var parentId = selectedNode.pid;
if (parentId !== 0) {
var parentNode = data.find(node => node.id === parentId);
if (parentNode) {
select.update({
// 展开父节点
data: { ...parentNode, selected: true },
type: 'add'
});
}
}
}
}
}
// 监听change事件
select.on('change', function() {
relateNodes();
});
relateNodes();
});
</script>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/qeH1 著作权归作者所有。请勿转载和采集!