zTree -- jQuery 树插件的使用包括添加、编辑(MVC)
zTree -- jQuery 树插件网址:https://www.treejs.cn/v3/main.php#_zTreeInfo
自行下载所需要的文件
我自己写的一些具体示例：
使用的.netCore 6 后端使用的ORM框架SqlSugar的中的ToTreeAsync方法返回的需要的数据格式，如果没用SqlSugar可以自己写递归来完成
public async Task<ResultDto<List<DepartmentDto>>> GetZreeInfo(long pId)
{
try
{
var tree = await _db.Queryable<DepartmentModel>().Select(x=>new DepartmentDto()).ToTreeAsync(it => it.children, it => it.Dep_Pid, 0);
return new ResultDto<List<DepartmentDto>>
{
code = 0,
data = tree,
msg = "",
count = tree.Count,
};
}
catch (Exception)
{
throw;
}
}具体的一些文件的引用根据自己的实际情况去引用
接下来就是怎么去在MVC中去使用
首先是去写添加的时候
<div class="layui-form-item">
<label class="layui-form-label">责任科室:</label>
<div class="layui-input-block">
<div class="layui-inline">
<input type="text" id="selectedNode" name="Dep_Names" readonly class="layui-input">
</div>
<div class="layui-inline">
<button type="button" class="layui-btn layui-btn-primary" onclick="openTree()">选择</button>
</div>
</div>
</div>这段代码写在你的form表单中你需要的位置即可，注意标签中的name是你数据库中所定义的你需要添加的值的名称
<!-- 树形选择器的弹层 -->
<script type="text/html" id="treeSelector">
<ul id="treeDemo" class="ztree"></ul>
</script>
<script>
layui.use(['layer'], function () {
var layer = layui.layer;
var treeData = [];
$.ajax({
url: '@Url.Action("GetZreeInfo")',
type: 'get',
async: false,
success: function (res) {
treeData = res.data;
}
})
// 打开责任科室树选择器
window.openTree = function () {
var index = layer.open({
type: 1,
title: '选择科室',
content: $('#treeSelector').html(),
area: ['300px', '500px'],
success: function (layero, index) {
// 渲染责任科室树选择器
var setting = {
view: {
dblClickExpand: false, // 禁止双击展开收起
showLine: true // 显示连接线
},
data: {
simpleData: {
enable: true,
idKey: 'Dep_Id',
pIdKey: null,
rootPId: null
},
key: {
name: 'Dep_Name', // 节点名称字段
title: 'Dep_Name' // 新增节点名称字段
}
},
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].Dep_Name); // 只将非父节点的值添加到数组中
}
}
$('#selectedNode').val(selectedNodeNames.join(', '));
var selectedNodeIds = []; // 存储选择的节点ID
for (var i = 0; i < nodes.length; i++) {
selectedNodeIds.push(nodes[i].Dep_Id); // ID添加到数组中
}
$('#selectedNodeIds').val(selectedNodeIds.join(', '));
}
}
};
$.fn.zTree.init($('#treeDemo'), setting, treeData);
}
});
};
});
</script>最后根据<scrip>中的代码具体的参考去完成
接下来是编辑
同样的去复制你的添加界面的代码 只不过我在这里使用到了 asp-for来进行数据回显，你可以根据你自己的方式去实现
<div class="layui-form-item layui-hide">
<div class="layui-input-block">
<input type="text" id="selectedNodeId" asp-for="Dep_Ids" readonly class="layui-input">
<input type="hidden" asp-for="Ope_Password" />
<input type="hidden" asp-for="Ope_Id" />
<button class="layui-btn" lay-submit lay-filter="formDemo" id="formDemo">添加</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div><!-- 树形选择器的弹层 -->
<script type="text/html" id="treeSelector">
<ul id="treeDemo" class="ztree"></ul>
</script>
<script>
layui.use(['layer'], function () {
var layer = layui.layer;
var treeData = [];
$.ajax({
url: '@Url.Action("GetZreeInfo")',
type: 'get',
async: false,
success: function (res) {
treeData = res.data;
}
})
// 打开责任科室树选择器
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: 'Dep_Id',
pIdKey: null,
rootPId: null
},
key: {
name: 'Dep_Name', // 节点名称字段
title: 'Dep_Name' // 新增节点名称字段
}
},
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].Dep_Name); // 只将非父节点的值添加到数组中
}
}
$('#selectedNode').val(selectedNodeNames.join(', '));
var selectedNodeIds = []; // 存储选择的节点ID
for (var i = 0; i < nodes.length; i++) {
selectedNodeIds.push(nodes[i].Dep_Id); // 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("Dep_Id", 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].Dep_Name);
}
}
$('#selectedNode').val(selectedNodeNames.join(', '));
// 更新已选择的节点ID
var selectedNodeId = [];
for (var i = 0; i < nodes.length; i++) {
if (!nodes[i].isParent) {
selectedNodeId.push(nodes[i].Dep_Id);
}
}
$('#selectedNodeId').val(selectedNodeId.join(', '));
}
});
};
});
</script>代码仅供参考，具体的实现可以参考上面的网址和代码。
