The first is to define the class, here I have two tables, using the inheritance of the class
This is the first class (if you only use one table, just write it like this class)
public class company_rubbish_manage_type_link_ext: company_rubbish_manage_type
{
public int RubbishTypeId { get; set; }
public int CompanyId { get; set; }
public string user_name { get; set; }
//这个是必须的,用来记录子级
public List<company_rubbish_manage_type_link_ext> children = new List<company_rubbish_manage_type_link_ext>();
}
second class
public class company_rubbish_manage_type
{
public int Id { get; set; }
public string Name { get; set; }
//这个title一定要,这是layui显示树形组件下拉列表的标题值
public string title { get; set; }
public string Code { get; set; }
public int Type { get; set; }
public int Grade { get; set; }
public int ParentId { get; set; }
public int OperatorId { get; set; }
public DateTime CreateTime { get; set; }
}Then there is the method of defining recursion. I have two writing methods below, which can achieve the desired effect.
First of all, the data list checked out from the database is as follows, there must be a parent Id (parentId) and its own Id, and here the parentId is 0, which is the largest parent
The first method does not use recursion and is relatively simple
public JsonResult GetCompanyRubbishManageTypeByLinkId()
{
//这个是你从数据库查出来的数据列表的方法
List<company_rubbish_manage_type_link_ext> list = _companyRubbishManageTypeLinkServices.GetExistList(comparam).InnerList;
//调用方法分级显示
GenerateTreeTableData(ref list);
//传数据到页面
return Json(list, JsonRequestBehavior.AllowGet);
}
//这个是分级方法
private void GenerateTreeTableData(ref List<company_rubbish_manage_type_link_ext> orgs)
{
foreach (var item in orgs)
{
item.title = item.Name;
item.children = orgs.Where(x => x.ParentId == item.Id).ToList();
foreach (var child in item.children)
{
child.title = child.Name;
child.children = orgs.Where(x => x.ParentId == child.Id).ToList();
}
}
orgs = orgs.Where(x => x.ParentId == 0).ToList();
}This method uses the ref keyword, which is one of the keywords of C#, which is used to pass parameters by reference , that is, to pass the memory address of the variable. This means that modifications made to the variable inside the method will affect the value of the variable outside the method.
Note: There are some restrictions and precautions for using the ref keyword. For example, it must be guaranteed that the modification of the variable inside the method is legal, otherwise it may cause some difficult-to-debug problems. Therefore, caution is required when using the ref keyword.
The second way of writing (this way of writing uses recursion)
The class definition is consistent with the above
public JsonResult GetCompanyRubbishManageTypeByLinkId()
{
//这个是你从数据库查出来的数据列表的方法
List<company_rubbish_manage_type_link_ext> list = _companyRubbishManageTypeLinkServices.GetExistList(comparam).InnerList;
//调用递归方法分级显示
List<company_rubbish_manage_type_link_ext> list1 = ParseTree(list,0);
//传数据到页面
return Json(list1, JsonRequestBehavior.AllowGet);
}
//递归方法
public List<company_rubbish_manage_type_link_ext> ParseTree(List<company_rubbish_manage_type_link_ext> crmtList, int parentId)
{
//找当前层级下级（如果ParentId==0 就是第一级）
List<company_rubbish_manage_type_link_ext> Result = new List<company_rubbish_manage_type_link_ext>();
company_rubbish_manage_type_link_ext treeModel = null;
for (int i = 0; i < crmtList.Count(); i++)
{
if (crmtList[i].ParentId == parentId)
{
treeModel = new company_rubbish_manage_type_link_ext();
treeModel.Id = crmtList[i].Id;
treeModel.title = crmtList[i].Name;
treeModel.Code = crmtList[i].Code;
treeModel.CompanyId = crmtList[i].CompanyId;
treeModel.Grade = crmtList[i].Grade;
treeModel.Name = crmtList[i].Name;
treeModel.OperatorId = crmtList[i].OperatorId;
treeModel.ParentId = crmtList[i].ParentId;
treeModel.RubbishTypeId = crmtList[i].RubbishTypeId;
treeModel.Type = crmtList[i].Type;
treeModel.user_name = crmtList[i].user_name;
List<company_rubbish_manage_type_link_ext> childList = ParseTree(crmtList, crmtList[i].Id);
if (childList.Count != 0)
{
treeModel.children.AddRange(childList);
}
Result.Add(treeModel);
}
}
return Result;
}The data passed from the page is as follows
The page effect is as follows (I don’t know why the style is a bit wrong haha, but the problem is not big)
The last is the front end
//定义个div作为layui树形组件的显示容器
<div id="test12" class="demo-tree-more">
//记得引用layui的样式和js
<link href="~/content/layui/css/layui.css" rel="stylesheet" />
<script src="~/Content/layui/layui.js"></script>\
//然后是js部分
<script>
layui.use(['tree', 'util'], function () {
var tree = layui.tree
, layer = layui.layer
, util = layui.util
var companyId = Number($("#id").val());
if (companyId == "NaN") {
companyId = Number($("#id").val());
}
$.ajax({
type: 'get',
//这个是你调用接口的地址,companyid是我传的参数
url: '/System/GetCompanyRubbishManageTypeByLinkId,
data: {},
success: function (dataInfo) {
//dataInfo就是上面给你们看的传过来的数据
tree.render({
elem: '#test12'
//绑定数据源
, data: dataInfo
, showCheckbox: true //是否显示复选框
, id: 'demoId1'
, isJump: true //是否允许点击节点时弹出新窗口跳转
, click: function (obj) {
var data = obj.data; //获取当前点击的节点数据
layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
}
});
}, error: function () {
toastr.error("请求错误");
}
});
});
</script>In the end, I even gave you the address quoted by layui intimately, just go to my Gitee to get it, the address is below
https://gitee.com/guo-ruiwb/layui-file-reference
Okay, seeing this is considered a predestined person, I hope it can help you (ouch, typing is really tiring)