Net递归查询组装tree树形菜单,layui以及jQuery的zTree共用
大家都知道组织树形菜单都会存在上下级的关系,后台获取到所有的菜单,可是怎么组织树形菜单,不可能写几十个foreach来循环吧,一般通过递归算法来写。
首先写一个类,组织树形菜单模型,这个类可以根据layui或者zTree的官方api定制不同的属性
public class TreeList
{
public string title { get; set; }
public string id { get; set; }
public string field { get;set;}
public List<TreeList> children { get; set; }
public bool open { get; set; }
public string href { get; set; }
public bool issys { get; set; }
}
接下来,使用递归算法,组织树形数据,返回前端直接使用插件绑定即可
/// <summary>
/// 组织树形菜单数据
/// </summary>
/// <param name="data">数据集合</param>
/// <param name="recordId">可以是id,首次可以传空</param>
/// <returns></returns>
public List<TreeList> GetTreeList(List<DirectoryDto> data,string recordId)
{
List<TreeList> treeList = new List<TreeList>();
recordId = string.IsNullOrEmpty(recordId) ? "default" : recordId;
//获取id的所有下级
List<DirectoryDto> dataList = data.Where(u => u.ParentId == recordId).ToList();
foreach (var item in dataList)
{
TreeList model = new TreeList();
model.id = item.RecordId;
model.title = item.Name;
model.field = item.ParentId;
if (item.ParentId== "default"&&item.Name== "工会资料")
{
model.open = true;
}
//循环调用,获取当前的子目录
model.children=GetTreeList(data,item.RecordId);
treeList.Add(model);
}
return treeList;
}
在需要的控制器中调用即可
//组织树形菜单结构
//Dictionary<string>
List<TreeList> treeList = new List<TreeList>();
if (result.Data!=null && result.Data.Count()>0)
{
result.Data = result.Data.OrderBy(u => u.AddTime).ToList();
//treeList = ZuZhiTree(result.Data.ToList());
treeList = GetTreeList(result.Data.ToList(), "");
}
return Json(new { data= treeList });
根据不同的插件,直接绑定即可,此处使用的zTree ,使用layui一样的可以使用,之前也是使用的layui,只是方便统一,前端改成了Ztree
//树形
var settingss = {
data: {
simpleData: {
enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式
idKey: "id", //节点数据中保存唯一标识的属性名称
pIdKey: "field", //节点数据中保存其父节点唯一标识的属性名称
//rootPId: -1 //用于修正根节点父节点数据,即 pIdKey 指定的属性值
},
key: {
name: "title" //zTree 节点数据保存节点名称的属性名称 默认值:"name"
}
},
check: {
enable: true, //true 、 false 分别表示 显示 、不显示 复选框或单选框
nocheckInherit: true //当父节点设置 nocheck = true 时,设置子节点是否自动继承 nocheck = true
},
callback: {
beforeClick: zTreeBeforeClick,
//onExpand: zTreeOnExpand
}
};
//数据
var zTreeObj;
$.ajax({
url: "@Url.Content("~/UnionData/GetDirectory")",
type: "get",
success: function (res) {
var resdata = eval(res);
//console.log(resdata.data);
//var data = "[" + resdata.data + "]";
console.log(resdata.data);
if (resdata.data != null || resdata.data!="") {
zNodes = resdata.data;
zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, zNodes); //初始化树
//zTreeObj.expandAll(true); //true 节点全部展开、false节点收缩
} else {
$("#treeDemo").html("<li><span>暂无授权目录可使用</span></li>")
}
}
})
效果如下
无线下级都可以
作者自己写的网站:www.51wzuan.cn --- 51网赚网
该网站主要分享一些可以手机兼职赚钱的方法,各位大佬,如有兴趣,可以提以下小小意见。谢谢大家
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了