LayUI树形结构

发布时间 2023-12-05 12:22:09作者: Merakia

最近在学习LayUI学到tree组件 ,所以做一下随笔记录

下面是我用来接收数据的类

namespace HisProject.Models
{
public class TreeListToReturn
{
public string id { get; set; }
public string title { get; set; }
public List<TreeListToReturn> children { get; set; } = new List<TreeListToReturn>();

public TreeListToReturn SetId(string id)
{
this.id = id;
return this;
}
public TreeListToReturn SetTitle(string title)
{
this.title = title;
return this;
}

public TreeListToReturn Addchildren(TreeListToReturn children)
{
this.children.Add(children);
return this;
}

}
}

 

//下面是返回的tree需要的数据  : 有想过用递归做,但是递归我不太熟悉,后面有时间我也想试下用递归做。这里我用的是链式调用。

public IActionResult GetInventoryTree()
{//初始化一个arrayList存放最后的数据
ArrayList array = new ArrayList();
//最上面一层
TreeListToReturn topTreeListToReturn = new TreeListToReturn();
topTreeListToReturn.SetTitle("收费项").SetId("00");
//TreeListToReturn treeListToReturn = new TreeListToReturn();
IEnumerable<Inventory> res = _inventoryService.GetInventoryById(string.Empty);
foreach (Inventory item in res)
{
TreeListToReturn treeListToReturn = new TreeListToReturn();
//第二层 添加 id title
treeListToReturn.SetId(item.InventoryId).SetTitle(item.InventoryName);
topTreeListToReturn.Addchildren(treeListToReturn);
if (!string.IsNullOrEmpty(item.InventoryInnerType))
{//循环第二层 添加 children
IEnumerable<Inventory> innerInventory = _inventoryService.GetInventoryById(item.InventoryInnerType);
foreach (Inventory innerItem in innerInventory)
{
TreeListToReturn treeListToReturn1 = new TreeListToReturn();
treeListToReturn1.SetId(innerItem.InventoryId).SetTitle(innerItem.InventoryName);
treeListToReturn.Addchildren(treeListToReturn1);
if (!string.IsNullOrEmpty(innerItem.InventoryInnerType))
{
IEnumerable<Inventory> innestInventory = _inventoryService.GetInventoryById(innerItem.InventoryId);
foreach (Inventory innestItem in innestInventory)
{
//上一层的List 添加本层的List为children
TreeListToReturn t = new TreeListToReturn().SetId(innestItem.InventoryId).SetTitle(innestItem.InventoryName);
treeListToReturn1.Addchildren(t);
}
}
}
}
}
array.Add(topTreeListToReturn);
return SuccessResult("ok", array);

}

//下面是数据访问层  我用的是EF

public IEnumerable<Inventory> GetInventoryById(string inventoryType)
{
return _dbContent.inventory.Where(p => p.InventoryType == inventoryType).ToList();
}

//下面是html tree组件的render代码    tree.reload暂时还不会。

tree.render({
elem: '#test9'
, data: data1
,id:"treeID"
, edit: ['add', 'update', 'del'] //操作节点的图标
, click: function (obj) {
//layer.msg(JSON.stringify(obj.data));
//console.log(obj.data.id);
inventoryType = obj.data.id;
table.render({
elem: "#demo"
, toolbar: '#toolbarD'
, url: "GetAllInventoryByType?Type=" + obj.data.id
, height: 'full-100'
, page: true
, cols: [[
{ type: 'checkbox', fixed: 'left' },
{ field: 'InventoryId', title: '物料编码', width: 120, sort: true, fixed: 'left' }
, { field: 'InventoryName', title: '物料名称', width: 150 }
, { field: 'InventoryType', title: '大类', width: 80, sort: true }
, { field: 'InventoryInnerType', title: '小类', width: 80 }
, { field: 'Address', title: '地址', width: 177 }
, { field: 'SupplyerName', title: '供应商', width: 120, sort: true }
, { title: '操作', width: 133, templet: '#toolbarDemo' }
]]
})
}
});