# table树形结构

此树形结构配置只对生成页面生效,单独使用voltable的树形table,请参照:组件示例->table组件

An image

# 树形结构配置方式一

此配置适用于表数据较小的情况,配置会加载全表数据,优点:配置简单、无后台代码、修改刷新页面后展开的节点保持不变

onInit() {
    //隐藏分页信息
    this.paginationHide = true;
    //禁用延迟加载(必填)
    this.lazy = false;
    
    //树形结点的id字段(必填)
    this.rowKey = 'DepartmentId';
    //父级id字段(必填)
    this.rowParentField = "ParentId";

    //是否展开所有节点(默认会记录展开的节点)
    //this.defaultExpandAll=true;
    //默认展开的节点
    //this.expandRowKeys=["id值"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 树形结构配置方式二

此配置适用于表数据量大的情况(所有节点都是延迟加载的)

/********************************前端代码**************************************/
onInit() {
      //设置treetable的唯一值字段(这个字段的值在表里面必须是唯一的)
      this.rowKey = 'Role_Id'; //Role_Id换为表的主键字段
},
/***加载后台数据见Sys_RoleController.cs文件***/
loadTreeChildren(tree, treeNode, resolve) {
    //加载子节点
    let url = `api/表名/getTreeTableChildrenData?roleId=${tree.Role_Id}`;//Role_Id换为表的主键字段
    this.http.post(url, {}).then((result) => {
       resolve(result.rows);
    });
}

/********************************后台代码**************************************/
//后台代码见:Sys_RoleController.cs文件(Sys_RoleController改为你当前表的Controller)
 public partial class Sys_RoleController
 {
    private readonly ISys_RoleService _service;//访问业务代码
    private readonly ISys_RoleRepository _repository;
    private readonly IHttpContextAccessor _httpContextAccessor;

    [ActivatorUtilitiesConstructor]
    public Sys_RoleController(
        ISys_RoleService service,
        ISys_RoleRepository repository,
        IHttpContextAccessor httpContextAccessor
    )
    : base(service)
    {
        _service = service;
        _repository = repository;
        _httpContextAccessor = httpContextAccessor;
    }

    /// <summary>
    /// treetable 获取子节点数据(2021.05.02)
    /// </summary>
    /// <param name="loadData"></param>
    /// <returns></returns>
    [ApiActionPermission(ActionPermissionOptions.Search)]
    [HttpPost, Route("GetPageData")]
    public override ActionResult GetPageData([FromBody] PageDataOptions loadData)
    {
        return GetTreeTableRootData(loadData).Result;
    }

    /// <summary>
    /// treetable 获取一级(根)节点数据
    /// </summary>
    /// <returns></returns>
    [HttpPost, Route("getTreeTableRootData")]
    [ApiActionPermission(ActionPermissionOptions.Search)]
    public async Task<ActionResult> GetTreeTableRootData([FromBody] PageDataOptions options)
    {
        //页面加载根节点数据条件x => x.ParentId == 0,自己根据需要设置
        var dbServiceId = UserContext.CurrentServiceId;
        var query = _repository.FindAsIQueryable(x => x.ParentId == 0 || x.Role_Id == 1);

        var queryChild = _repository.FindAsIQueryable(x => true);
        var rows = await query.TakeOrderByPage(options.Page, options.Rows)
            .OrderBy(x => x.Role_Id).Select(s => new
            {
                s.Role_Id,
                s.ParentId,
                s.RoleName,
                s.DeptName,
                s.Dept_Id,
                s.Enable,
                s.CreateDate,
                s.Creator,
                s.Modifier,
                s.ModifyDate,
                s.OrderNo,
                s.DatAuth,
                hasChildren = queryChild.Any(x => x.ParentId == s.Role_Id)
            }).ToListAsync();
        return JsonNormal(new { total = await query.CountAsync(), rows });
    }

    /// <summary>
    ///treetable 获取子节点数据
    /// </summary>
    /// <returns></returns>
    [HttpPost, Route("getTreeTableChildrenData")]
    [ApiActionPermission(ActionPermissionOptions.Search)]
    public async Task<ActionResult> GetTreeTableChildrenData(int roleId)
    {
        //点击节点时,加载子节点数据
        var roleRepository = Sys_RoleRepository.Instance.FindAsIQueryable(x => true);
        var query = roleRepository.Where(x => x.ParentId == roleId);
        if (AppSetting.UseDynamicShareDB)
        {
            query = query.Where(x => x.DbServiceId == UserContext.CurrentServiceId);
        }
        var rows = await query
            .Select(s => new
            {
                s.Role_Id,
                s.ParentId,
                s.RoleName,
                s.DeptName,
                s.Dept_Id,
                s.Enable,
                s.CreateDate,
                s.Creator,
                s.Modifier,
                s.ModifyDate,
                s.OrderNo,
                s.DatAuth,
                hasChildren = roleRepository.Any(x => x.ParentId == s.Role_Id)
            }).ToListAsync();
        return JsonNormal(new { rows });
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116