Flask+LayUI开发手记（五）：树型表格实现数据展示与编辑

hbrown

于 2024-08-29 15:56:07 发布

阅读量824

点赞数 11

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/hbrown/article/details/141647748

版权

说起来，树型表格treeTable绝对是后端程序员的巨大福利。要知道，在系统编程中，有父子节点关系的数据真是太多了，随便想一下就可以举出很多例子，比如权限、栏目、机构、产品、科目、货币、行业诸般等等，其实只要是稍微复杂一点的参数数据都会以树型方式来进行组织。以前做这种要专门找个树型组件来做，很麻烦的。

Layui提供的树型表格TreeTable，实际是对表格的一个扩展类，把树和表格合在一起，前端配置上完全和表格一样，数据组织也变化不大。树型表格最经典的实现应该是机构维护的程序，这次就拿它来做例子，本部分还是先做数据查询列表的功能，下一部分介绍树型表格的编辑。

组织机构数据列表的程序包括如下几部分，后端包括机构model和机构列表数据准备以及机构树型数据的组织三部分，前端是树型表格的展示实现。

第一部分是机构的模型表，字段主要包括ID、机构编码、名称、简称、父级机构以及邮箱、地址、电话和机构类型等字段，如下：

class Branchs(db.Model):
    __tablename__ = 'cm_branch'
    id = db.Column(db.Integer,primary_key=True,autoincrement=True)  #机构ID
    branch_cd = db.Column(db.String(20),nullable=False,unique=True) #机构编码
    branch_name = db.Column(db.String(50))                          #机构名称
    short_name = db.Column(db.String(30))                           #机构简称
    parent_id=db.Column(db.Integer,default=0)                       #父级机构ID,不能为空
    email = db.Column(db.String(50))                                #联系邮箱
    phone = db.Column(db.String(20))                                #联系电话
    address = db.Column(db.String(120))                             #办公地址
    branch_cat = db.Column(db.String(4))                              #机构业务条线体系
                                        # 00：分支机构 (包括总部、区域分公司、办事处等)
                                        # 10：管理条线 (包括计划、财务、市场、审计合规)
                                        # 20：行政条线（包括人力、行政、党办等） 
                                        # 30：营业条线(包括销售、市场、专项产品部门)
    branch_type = db.Column(db.String(4))                           #机构类型 
                                        #00：管理机构 10：营业机构 20:管理部门 90：统计机构 
    status = db.Column(db.SmallInteger)                             #状态 0:正常 1:停用 9:废弃
    regtime = db.Column(db.DateTime,default=datetime.now)           #注册时间

第二个程序是前端列表展示程序，branch_list.hmtl.j2，整个程序结构和前面的数据表格展示几乎完全一致。

<!DOCTYPE html>
<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>CMS系统-机构管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css"  media="all">
</head>
<body>

<table id="table_tree" lay-filter="table_tree" style="margin-top:-15px;"></table>

<script type="text/html" id="toolBar">
    <div class="layui-btn-container">
        <div class="layui-inline">
            <label class="layui-form-label layui-btn-sm" style="width:90px;">栏目名称:</label>
            <div class="layui-input-inline">
                <input type="text" id="cat_name" placeholder="请输入机构名称" autocomplete="off" class="layui-input layui-btn-sm">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline" style="padding-left:10px;padding-top:8px">
                <button id="btn_search" type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="search">
                    <i class="layui-icon layui-icon-search"></i>查询
                </button>
                <button id="btn_add" type="button" class="layui-btn layui-btn-sm" lay-event="add">
                    <i class="layui-icon layui-icon-add-1"></i>新增
                </button>
                <button id="btn_mdel" type="button" class="layui-btn layui-btn-sm" lay-event="mdel">
                    <i class="layui-icon layui-icon-delete"></i>批量删除
                </button>
           </div>
        </div>
    </div>
</script>

<script type="text/html" id="linetoolBar">
    <a class="layui-btn layui-btn-sm" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>
    <a class="layui-btn layui-btn-sm" lay-event="adds" title="加子结点"><i class="layui-icon layui-icon-add-circle-fine"></i></a>
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i></a>
</script>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(['jquery','layer','treeTable'], function(){
	var $=layui.jquery
        ,layer=layui.layer
        ,table=layui.treeTable;
    var cur_row = null;
    var url_tree = '{{url_for("sysadm.branch_list")}}';
    var url_edit = '{{url_for("sysadm.branch_edit")}}';

    table.render({
            elem: '#table_tree'
            ,height: 'full'
            ,url: url_tree
            ,toolbar: '#toolBar'
            ,method: 'POST'
            ,page: false
            ,limits: [13, 26, 39, 52, 65]           
            ,limit : 13 
            ,even : true
            ,size : 'sm' 
            ,cols: [[ 
            { type: 'checkbox', fixed: 'left' }
            ,{field: 'id', title: 'ID', width:40, sort: true, fixed: 'left'}
            ,{field: 'name', title: '机构名称', width:140}
            ,{field: 'parent_id', title: 'PID', width:40, sort: true}
            ,{field: 'short_name', title: '机构简称', width:80}
            ,{field: 'branch_cd', title: '机构编码', width:60}
            ,{field: 'status_name', title: '状态', width:60}
            ,{field: 'category_name', title: '业务条线', width: 100}
            ,{field: 'type_name', title: '机构类型', width: 100}
            ,{field: 'regtime', title: '注册时间', width: 140}
            ,{fixed: 'right', width:200, align:'center', toolbar: '#linetoolBar'}
            ]]
            ,done: function () {
                table.expandAll('table_tree', true);
            }
    });

    //表头工具栏事件
    table.on('toolbar(table_tree)', function (obj) {
        switch (obj.event) {
            case 'search':
                tree_refresh(1);
                break;
            case 'add':
                cur_row=null;
		        tree_edit('add','新增机构节点',0);
                break;
            case 'mdel':
                tree_mdelete(1)
                break;
        };
    });

    //table行内工具栏事件
    table.on('tool(table_tree)', function (obj) {    
        //obj是指这张表中的数据，将表中选中的行数据赋给cur_row变量        
        cur_row = obj.data;                             
        var rid = cur_row.id;

        switch(obj.event) {
            case 'edit':
                tree_edit('upd',"修改机构节点",rid);
                break;
            case 'adds':
                tree_edit('adds',"新增下级机构",rid);
                break;
            case 'del':
                break;
        }
    });

    function tree_refresh(cpage) {
        table.reload('table_tree', {
            where: {                           
                'searchtext':$('#searchtext').val()
            },  
            page: { curr: cpage },
        },true);
    }

});

</script>
</body>
</html>

和数据表格的展现程序对比一下，唯一的区别是引入的类是treeTable类。table.render的参数也完全一致，表头工具栏和行内工具栏的编写也是完全一样的。行内工具栏内增加了一个加子节点的功能，就是在编辑界面限定了父节点不能选择，因此增加了一块特殊处理，这个到后面的编辑功能时再细说。

这里有一个问题要说明一下，就是分页。treeTable是支持分页的，但是我始终觉得树型分页是不单没意义而且还会造成逻辑混乱。因为后端取数据时，树型结构的顺序与ID顺序无关，这样取出的数据可能构不成完整的树型。同样，检索功能也造成了树型的混乱，不过至少检索功能可以标定想找的记录。

第三个程序是后端的树型数据服务程序，程序如下：

################机构管理模块#################
@bp.route('/branch_list/',methods=['GET','POST'])
@login_required
#@admin_auth
def branch_list():
    if request.method == 'GET':
        return render_template('admin/branch_list.html.j2')
    else :
        logging.debug('Branch list POST....')
        br_name = request.values.get('searchtext')
        filtstr = ' 1=1 '
        if br_name :
            filtstr += ' and branch_name like "' + br_name + r'%"'
        logging.debug('filter : ' + filtstr)

        rows = db.session.query(Branchs).filter(text(filtstr)).order_by(Branchs.id).all()
        rnum = len(rows)
        alist = []
        logging.debug('rnum: %s' % rnum)
        brhCategory = Branch_Category()
        brhType = Branch_Type()
        brhStatus = Branch_Status()
        for irow in rows:
            rdata = dict(id=irow.id,name=irow.branch_name,parent_id=irow.parent_id,
                        short_name= irow.short_name,branch_cd=irow.branch_cd,
                        email=irow.email,phone=irow.phone,address=irow.address,
                        branch_cat=irow.branch_cat,category_name = brhCategory.id_format(irow.branch_cat), 
                        branch_type=irow.branch_type,type_name = brhType.id_format(irow.branch_type),
                        status=irow.status,status_name = brhStatus.id_format(irow.status),
                        regtime=irow.regtime.strftime('%Y-%m-%d %H:%M:%S'))
            alist.append(rdata)
        adata = dim_build_tree(alist,0,0)
        logging.debug('adata:' + str(adata))
        rsdata = {
            "code": 0,
            "msg": "获取机构数据成功",
            "count": rnum,
            "data":adata
        }
        return json.dumps(rsdata)

这个程序也和数据表格的后端数据服务程序没有区别，只是去掉了分页逻辑处理部分。回传数据的最外层结构是一样的，但是回传的明细数据结构是整理成了一个树型结构数据，调用了通用工具函数dim_build_tree()来实现这个功能。程序如下：

#由父子节点的列表生成树型结构的通用程序。
#要求节点为id,父节点为parent_id，节点名称为name,子结构为children。
def dim_build_tree(dlist,p_id,level):
    tree = []
    for row in dlist:
        if row['parent_id'] ==p_id:
            row['level'] = level
            child = dim_build_tree(dlist, row['id'], level+1)
            row['children'] = []
            if child:
                row['children'] += child
                row['isParent'] = True
            else :
                row['isParent'] = False
            tree.append(row)
    return tree

注意，想让树型能够成功展示出来，下面的每个环节都很重要。

第一，回传的数据结构是一个嵌套的数组，必须要有id、parent_id和name三个字段，否则树型无法显示。特别是name字段，因为大多数数据的名称都可能有自定义的字段名，在上面的dict生成时，必须映射成’name'。

第二，isParent必须要设置上（虽然我觉得这个字段其实是冗余的），而且必须是boolean值。并且前端treeTable要求的是‘true/false'，而不是python的‘True/False'。这个我前面提过，flask自带的jsonify()函数没有做这个转换，所以前端树型展示有错误，必须换成json.dumps()来转换，就没有问题了。

最后是功能界面展示，如下图所示。