zTree -- jQuery 樹插件網址:https://www.treejs.cn/v3/main.php#_zTreeInfo 自行下載所需要的文件 我自己寫的一些具體示例： 使用的.netCore 6 後端使用的ORM框架SqlSugar的中的ToTreeAsync方法返回的需要的數據格式， ...
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>代碼僅供參考，具體的實現可以參考上面的網址和代碼。
