使用记录：layUI的treeTable树结构表格的使用

最新推荐文章于 2025-04-15 09:15:49 发布

wyf658

最新推荐文章于 2025-04-15 09:15:49 发布

阅读量1.3k

点赞数 3

文章标签： layui 前端 javascript python

本文链接：https://blog.youkuaiyun.com/weixin_64096823/article/details/139860433

版权

初始mysql数据库数据表：

二列数据，一个是类别，一个是名称。

需要的结果：

本想着直接提取数据库数据，让layUI识别形成树状表格。

开始修改tree各种属性，折腾了2天最终也没弄成，恕我无能呀。

最后还是把数据库数据转成嵌套的父子结构导入使用，啥属性也不用设置，直接成功，想通了用了两个多小时就搞定了，可惜了我的前二天呀。

使用layUI版本：2.9

开始上代码：

download.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>下载中心</title>
    {% load static %}
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
</head>

<body>
<br><br><H1 style="display: flex;justify-content: center;align-items: center; color:black">客户下载中心</H1><br>
<hr/>  <!-- 横线 -->
<script src="{% static 'layui/layui.js' %}" charset="utf-8"></script>

<div style="text-align: center;">
    <div class="layui-inline"><table id="ID-treeTable-demo" style="margin: 0 auto;"></table></div>
</div>

<script>
layui.use(function(){
    $ = layui.jquery;
    var treeTable = layui.treeTable;
  // 渲染
    var inst = treeTable.render({
        elem: '#ID-treeTable-demo',
        url: "/downloadTable_data", 
        parseData: function(res) {  return res;       }
        ,response: {
         statusCode: 200 //规定成功的状态码，默认：0
         }
        ,tree: {// treeTable 特定属性集
            customName: {
                name:'category', //折叠列的字段名，如果字段名是name，该行就可以省掉了
            },
            view: {
                iconLeaf:'',   //自定义叶子节点的图标, 默认如标不好看 ，设置为空了
            },
        },
          even : true,
          size:'sm', //单元格大小
          height: 'full-150',
          width:1300 ,
          cols: [[
          {field: 'category', title: '类别', width: 200, align: 'left',templet: function(d){
                        b = '<a style="font-weight: bold;">' + get_category_name(d).replace('公共', '') + '</a>';
                        return b
                     }},
          {field: 'certificate_name', title: '名称', width: 250,align: 'center',},
          {field: 'file_name', title: '文件名（点击下载）', width: 400, style:"color:red", align: 'center',templet: function (d) {
                      if (d.file_name == null){ return ''}
                      else { fileName = "<a style=\" text-decoration:underline; text-align: left;\" href='/cert_download?file_name=" + d.file_name + "'>" + d.file_name + "</a>";
                                    return  fileName}
                            }},
          {field: 'resume', title: '文件说明', width: 300,align: 'center',},
          {field: 'notes1', title: '文件大小',width: 100,align: 'center',},
        ]],
      // page: true
      });

});

    function get_category_name(d) {
       let name
         $.ajax({
            type: "get",
            url: "/get_category_name/?category_id=" + d.category,
            async: false,  //必须选 false
            success: function (res) {
               name =  res.category_name
            },
            error: function (e) { layer.msg(e.msg);}
         });
         return   name
    }
</script>
</body>

对应的后台数据函数 downloadTable_data(request)：

def downloadTable_data(request):   # 载入供客户下载的表格数据
    list_id=[]   # 获取开头“公共”类型的id列表
    id = models.category.objects.values('id').filter(stop_mark=1, certificate_name__startswith="公共")  # 查询字典
    for i in list(id): list_id.append(i['id'])  # 获取开头“公共”类型的id列表
    equ = models.honor.objects.values('category','certificate_name','file_name','resume','notes1').filter(category__in=list_id).order_by('category')
    data_f = list(equ)
    count = len(data_f)
    data=[]  # 定义最终数据
    children_list = []  # 定义一个孩子节点中转站
    for i in range(count):   # 循环每一条记录，转成父子结构
        category = data_f[i]['category']  # 当期类别 14
        if i == 0:  # 第一条记录，不用比较，直接加入 孩子列表里
            children_list.append(data_f[i])
        else:  # 若当前类别与上一类别相同，加入当期孩子里列表里
            if category == data_f[i-1]['category']:  #  9 == 14
                children_list.append(data_f[i])
                if i == count-1:   # 若到最后一个记录就该结束了，不用再循环了。 生成父节点结束战斗
                    data.append({'category': category, 'children': children_list})
            else:  # 当前类别与上一类别不相同，生成父节点，从新开始下一个父节点，孩子节点中转站从新开始
                data.append({'category': data_f[i-1]['category'], 'children': children_list})
                children_list = [data_f[i]]  # 孩子节点中转站重新定义，开始下一父节点

    res = {
        'code': 200,
        'count': count,
        'data': data
    }
    print(data)
    return JsonResponse(res)

至此game over，三天搞个这，也真是醉了！！！