当前位置：首页 > news >正文

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

news 2025/7/11 8:50:05

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

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

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

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

class Branchs(db.Model):__tablename__ = 'cm_branch'id = db.Column(db.Integer,primary_key=True,autoincrement=True)  #机构IDbranch_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'] = levelchild = dim_build_tree(dlist, row['id'], level+1)row['children'] = []if child:row['children'] += childrow['isParent'] = Trueelse :row['isParent'] = Falsetree.append(row)return tree

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

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

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

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