.Net6基于layui和ztree完成树形选择器添加和反填和修改-526互联

以责任科室为例存储两个值ResponsibleDepartment和AoId，ResponsibleDepartment:是科室名称，AoId是科室Id

添加:

//引入

<script type="text/html" id="treeSelector">
<ul id="treeDemo" class="ztree"></ul>
</script>
<script>
layui.use(['layer'], function () {
var layer = layui.layer;

//// 构造责任科室树选择器的数据
//var treeData = [
// {
// name: '责任科室1',
// id: 1,
// title: '责任科室1', // 新增字段存储名称
// children: [
// { name: '子科室1', id: 11, title: '子科室1' },
// { name: '子科室2', id: 12, title: '子科室2' }
// ]
// },
// {
// name: '责任科室2',
// id: 2,
// title: '责任科室2',
// children: [
// { name: '子科室3', id: 21, title: '子科室3' },
// { name: '子科室4', id: 22, title: '子科室4' }
// ]
// }
//];
var treeData = [];
$.ajax({
url: '@Url.Action("GetAdministrativeOffice")',
type:'get',
async:false,
success:function(res){
treeData = res;
console.log(treeData);
}
})
// 打开责任科室树选择器
window.openTree = function () {
var index = layer.open({
type: 1,
title: '选择科室',
content: $('#treeSelector').html(),
area: ['300px', '400px'],
success: function (layero, index) {
// 渲染责任科室树选择器
var setting = {
view: {
dblClickExpand: false, // 禁止双击展开收起
showLine: true // 显示连接线
},
data: {
simpleData: {
enable: true,
idKey: 'aoId',
pIdKey: null,
rootPId: null
},
key: {
name: 'aoName', // 节点名称字段
title: 'aoName' // 新增节点名称字段
}
},
check: {
enable: true, // 开启多选功能
chkStyle: 'checkbox', // 设置选择框的样式为复选框
chkboxType: { y: 's', n: 's' } // 只在父节点和子节点之间设置关联关系，不关联父级
},
callback: {
onCheck: function (event, treeId, treeNode) {
var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = zTreeObj.getCheckedNodes(true);

var selectedNodeNames = [];
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].isParent) { // 判断节点是否为父节点
selectedNodeNames.push(nodes[i].aoName); // 只将非父节点的值添加到数组中
}
}

$('#selectedNode').val(selectedNodeNames.join(', '));

var selectedNodeIds = []; // 存储选择的节点ID

for (var i = 0; i < nodes.length; i++) {
selectedNodeIds.push(nodes[i].aoId); // ID添加到数组中
}
$('#selectedNodeId').val(selectedNodeIds.join(', '));
}
}
};
$.fn.zTree.init($('#treeDemo'), setting, treeData);

}
});
};

});
</script>

反填和修改:

//以上代码使用asp-for反填

//引入

<script type="text/html" id="treeSelector">
<ul id="treeDemo" class="ztree"></ul>
</script>
<script>
layui.use(['layer'], function () {
var layer = layui.layer;

//// 构造责任科室树选择器的数据
//var treeData = [
// {
// name: '责任科室1',
// id: 1,
// title: '责任科室1', // 新增字段存储名称
// children: [
// { name: '子科室1', id: 11, title: '子科室1' },
// { name: '子科室2', id: 12, title: '子科室2' }
// ]
// },
// {
// name: '责任科室2',
// id: 2,
// title: '责任科室2',
// children: [
// { name: '子科室3', id: 21, title: '子科室3' },
// { name: '子科室4', id: 22, title: '子科室4' }
// ]
// }
//];
var treeData = [];
$.ajax({
url: '@Url.Action("GetAdministrativeOffice")',
type:'get',
async:false,
success:function(res){
treeData = res;
}
})
// 打开责任科室树选择器
window.openTree = function () {
var index = layer.open({
type: 1,
title: '选择科室',
content: $('#treeSelector').html(),
area: ['300px', '400px'],
success: function (layero, index) {
// 渲染责任科室树选择器
var setting = {
view: {
dblClickExpand: false, // 禁止双击展开收起
showLine: true // 显示连接线
},
data: {
simpleData: {
enable: true,
idKey: 'aoId',
pIdKey: null,
rootPId: null
},
key: {
name: 'aoName', // 节点名称字段
title: 'aoName' // 新增节点名称字段
}
},
check: {
enable: true, // 开启多选功能
chkStyle: 'checkbox', // 设置选择框的样式为复选框
chkboxType: { y: 's', n: 's' } // 只在父节点和子节点之间设置关联关系，不关联父级
},
callback: {
onCheck: function (event, treeId, treeNode) {
var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
var nodes = zTreeObj.getCheckedNodes(true);

$('#selectedNode').val(selectedNodeNames.join(', '));

var selectedNodeIds = []; // 存储选择的节点ID

for (var i = 0; i < nodes.length; i++) {
selectedNodeIds.push(nodes[i].aoId); // ID添加到数组中

}
$('#selectedNodeId').val(selectedNodeIds.join(', '));
}
}
};
$.fn.zTree.init($('#treeDemo'), setting, treeData);
//反填树的操作
//获取AoId的值
var AoId = $("#selectedNodeId").val();
console.log(AoId);
//转化为数组
var selectedNodeIds = AoId.split(",");
//获取责任科室树的 zTree 对象
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
//设置为选中状态
for (var i = 0; i < selectedNodeIds.length; i++) {
var node = zTreeObj.getNodeByParam("aoId", selectedNodeIds[i], null);
zTreeObj.checkNode(node, true, false); //设置为选中状态
}
// 更新已选择的节点名称
var nodes = zTreeObj.getCheckedNodes(true);
var selectedNodeNames = [];
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].isParent) {
selectedNodeNames.push(nodes[i].aoName);
}
}

$('#selectedNode').val(selectedNodeNames.join(', '));

// 更新已选择的节点ID
var selectedNodeId = [];
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].isParent) {
selectedNodeId.push(nodes[i].aoId);
}
}
$('#selectedNodeId').val(selectedNodeId.join(', '));
}
});
};
});
</script>

net6webapi 6webapi webapi net6