要怎样建设网站,常州做网站价格,贵州最新新闻,济南学网站建设哪里好用数据表格table展示系统数据#xff0c;是LayUI的基本功能#xff0c;编码十分简单#xff0c;就是通过table.render()渲染#xff0c;把属性配置好就OK了#xff0c;十分方便#xff0c;功能也十分强大。 不过#xff0c;在实现时#xff0c;把table的有个功能却理解… 用数据表格table展示系统数据是LayUI的基本功能编码十分简单就是通过table.render()渲染把属性配置好就OK了十分方便功能也十分强大。 不过在实现时把table的有个功能却理解错了就是分页。 table.render()的分页属性主要包括三个page、limit和limitspage是逻辑值设置为true是分页limit是每页显示行数limits是设置面显示行数的多条选项。应该说这几个属性都十分清晰按说明配好后果然分页控制栏就显示出来了真不错。 原来以为只要在服务端把需要的数据生成好传到前端来分页就算完成了但做了一段时间就发现不对了。开始做无外乎就是用户、角色、权限编辑记录都很少用不上分页等做日志显示时一下就看出错误了分页设的16条怎么系统在一个页面把全部100多条数据都展示了。 然后仔细研究才发现这三个分页属性设置好只是相当于打了了前端控制的开关界面上显示出分页流程控件可以进行分页切换操作但数据展示内容前端不管还是要后端做处理的。table会在每次点击一次页面切换时就向后端提交一次数据请求请求中含有page和limit属性后端按这两个参数把当前页的数据记录生成传下来。 我是一直不喜欢这种每换一次页就要向后端提数据请求的实现逻辑的。一页才展示10几条记录每次换页都要去取数据来来回回的性能不好对后端压力有些太多了。而且大部分数据展示功能总共也就是几百条数据完全可以一次把数据取到前端来只在前端做处理就可以了。这样无疑大大减轻后端服务器的压力而且控制上也比较简单是吧。 也因此我把系统需要进行分页展示的功能分成两种模式实现一是前端数据分页二是后端数据分页 。前端数据分页即一次性提取后台数据到前端由前端实现全部的分页数据处理控制后端数据分页即前端展示分页操作栏所有的分页操作均提交到后端进行数据请求由后端生成分页数据传给前端。 下面这些程序就是前端数据分页功能的实现程序主要分为三个部分前端html、JS实现、后端数据处理服务。
!DOCTYPE html
html
headmeta charsetutf-8/meta http-equivX-UA-Compatible contentIEedge,chrome1meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1titleCMS系统-登录日展示/titlelink relstylesheet href/static/layui/css/layui.css mediaall
/head
bodytable idadmin_log lay-filteradmin_log stylemargin-top:-15px;/tablescript typetext/html idtoolBardiv classlayui-btn-containerdiv classlayui-inline styledisplay:inline;margin-right:10px;label classlayui-btn-sm日期范围/labeldiv classlayui-input-inlineinput typetext idbdate placeholder开始日期 autocompleteoff classlayui-input layui-btn-sm/divlabel classlayui-btn-sm styledisplay:inline;-/labeldiv classlayui-input-inlineinput typetext idedate placeholder结束日期 autocompleteoff classlayui-input layui-btn-sm/divdiv classlayui-input-inline stylepadding-left:10px;padding-top:8pxbutton idbtn_search typebutton classlayui-btn layui-btn-normal layui-btn-sm lay-eventsearchi classlayui-icon layui-icon-search/i查询/button/div/div/div
/script
script typetext/html idlinetoolBara lay-eventdetail title查看细节 i classlayui-icon layui-icon-form/i/a
/script/body
/html 前端 HTML页面相当简单包括三个部分table、toolBar、linetoolBar。table部分定义了一个总的表格容器其具体内容由table.render进行渲染。toolBar是数据表格的头部工具栏linetoolBar是数据表格的行工具栏内容。这三部分有了基本的展示框架也就出来了。 具体的还要看JavaScript中的处理程序如下
script src/static/layui/layui.js/script
script
layui.use([jquery,layer,table,laydate], function(){var $layui.jquery,layerlayui.layer,tablelayui.table,laydate layui.laydate;var recData null;var recCount null;initTableData(0);// op 操作标志 0:渲染 1重载function initTableData(op) {$.post({{url_for(sysadm.admin_log)}},{bdate:$(#bdate).val(),edate:$(#edate).val()},function(rs){if(rs.code 0){recData rs.data;recCount rs.count;if (op 0) table_render();else table_reload(1);layer.msg(rs.msg,function(){});}else{layer.msg(rs.msg,function(){});return false;}},json);}function table_render() {table.render({elem: #admin_log,height: full,data: recData,toolbar: #toolBar,method: POST,page: true //开启分页,limits: [16, 20, 30, 40, 50] ,limit : 16 ,even : true,size : sm ,cols: [[ { type: checkbox, fixed: left },{field: id, title: ID, width:40, sort: true, fixed: left},{field: opr_cd, title: 操作, width:40, fixed: left},{field: operate, title: 内容, width:260},{field: username, title: 操作员, width:80, sort: true},{field: ip, title: 客户端IP, width:80},{field: add_time, title: 操作时间, width: 220},{fixed: right, width:200, align:center, toolbar: #linetoolBar}]]});b_date laydate.render({elem: #bdate});e_date laydate.render({elem: #edate});//表头工具栏事件table.on(toolbar(admin_log), function (obj) {switch (obj.event) {case search:initTableData(1);break;};});//table行内工具栏事件table.on(tool(admin_log), function (obj) { //obj是指这张表中的数据row obj.data; //将这张表中的数据赋给row这个变量rid row.id;switch(obj.event) {case detail:adminlog_detail(查看细节,rid);break;}});}function adminlog_detail(title,rid){url {{url_for(sysadm.admin_log_detail,id)}} rid;layer.open({type: 2, //layer提供了5种层类型。可传入的值有0信息框默认1页面层2iframe层3加载层4tips层title:title,area: [660px, 460px], //宽高skin: layui-layer-rim, //样式类名content: url, //查看细节页面btn:[关闭],yes: function(index, layero){layer.closeAll();},});}function table_reload(cpage) {table.reload(admin_log, {data : recData,page: { curr: cpage },},true);}});/script在数据分页展示中最主要的思路是先把数据一次性传到前端之后前端进行分页展示处理。所以处理包括三个阶段第一、数据获取第二、渲染数据表格第三、数据检索并重载。 第一步数据获取是向后端发post请求获取数据下传这个服务器的python程序不用改动继续按规定格式下发全量数据。 第二步渲染数据表格这块与原来最大的区别是数据源配置发生了变化。LayUI数据表格的数据源有两种模式一是配url属性二是配data属性。一般实现都是配url属性从后端路由或者是JSON文件中取数据。data方式我只用过一次就是调试render时模拟生成了几条数据配在前端变量里作为数据源。这样调试可以避免前后端通讯的干扰因素先熟悉table的各种技术细节。好在已经用过了要做前端分页控制就得用data数据源模式主要还是借鉴网上别人的经验将后端传下来的数据结构中的data赋给前端变量然后配置成数据源一切OK。 这一步还出现了个小问题。开始我把第一步数据获取initTableData()和第二步表格渲染table_render()以串行模式编排的也就是先取数赋本地变量再渲染表格。但运行时界面却不显示表格内容调试发现recData变量在initTableData中有数但在table_render渲染时居然是空值按照程序流程不该如此呀。上网查了一下原来是post异步通讯闹的怪也就是说执行post后流程并不会等待结果返回而是接着往下执行后面的程序。 先获取数据再表格渲染这一流程必须是串行的所以post异步通讯的处理方法必须改必须能串行。改可以有两种方法第一种是将post改为同步通讯也就是程序流程阻塞在这个点等接收到数据返回后再往下执行但post没有设置同步的属性要改就要改为ajax提交这个倒也不难。不过还有更好的办法还是把表格渲染的程序放到post的成功后回调函数中来执行这一样可以实行同步顺序的功能。应该说第二种方法更简单更方便。 表格渲染除了表格渲染render外还要对头部及行内工具栏的按钮动作进行功能设置这两个设置必须在表格渲染之后完成同样属于表格渲染的一部分。合并在一起形成table_render()都在获取数据后一起执行。 把这些都配置完成执行一下数据展示出来了。而且data数据源模式下table会自动完成分页展示控制不需要再象url数据源模式下还需要各种特殊处理了。这是真方便。 第三步是表格检查重载。头部工具栏中有一个检索功能就是输入启始日期和终止日期作为登录日志的查询条件。检索按钮实际上相当于表格数据初始化的再次重入所以执行了与第一次数据初始化同样的函数只是入口属性设置为1。这时需要从后端重新获取数据但前端不必重新渲染只要调用table_reload()进行重载就可以。 前端的功能完成了下面就是后端程序了。
bp.route(/admin_log/,methods[GET,POST])
login_required
#admin_auth
def admin_log():if request.method GET:return render_template(admin/admin_log.html.j2)else :logging.debug(Admin Log POST....)bdate request.values.get(bdate);edate request.values.get(edate)filtstr 11 if bdate :filtstr and add_time bdate if edate :filtstr and add_time edate logging.debug(filter : filtstr)adminlog db.session.query(Admin_Log).filter(text(filtstr)).order_by(Admin_Log.add_time.desc()).all()rnum len(adminlog)alist []for ilog in adminlog:rdata dict(idilog.id,opr_cdilog.opr_cd,admin_idilog.admin_id,usernameilog.username,operate ilog.operate,ipilog.ip,add_timeilog.add_time.strftime(%Y-%m-%d %H:%M:%S))alist.append(rdata)rsdata {code: 0,msg: 查询登录日志数据成功,count: rnum,data:alist}return jsonify(rsdata)bp.route(/admin_log_detail/,methods[GET])
def admin_log_detail():if request.method GET:rid request.values.get(id)if rid None:return render_template(admin/admin_log_dtl.html.j2)else:ilog db.session.query(Admin_Log).filter_by(idrid).first()rdata dict(idilog.id,opr_cdilog.opr_cd,admin_idilog.admin_id,usernameilog.username,operate ilog.operate,ipilog.ip,add_timeilog.add_time.strftime(%Y-%m-%d %H:%M:%S))rsdata {success: 1,msg: 取登录日志数据成功 rid,data:rdata}logging.debug(str(rsdata))return render_template(admin/admin_log_dtl.html.j2,rsdatarsdata)后端数据处理就是遵循flask的标准规范了在get请求时调用admin_log.html进行渲染然后页面的JS程序会向后端发出post请求获取数据。后端在POST分支里取数并生成回传数据文件。回传数据文件的按规定组成包括四部分code、count、msg和data。这个处理比较标准不再细述了。 最后的展示样式如下 后端一次获取数据传到前端由前端独立完成数据处理其实只适合数据查询的应用场景。因为一次把数据全传到前端的模式意味着系统内出现两套数据一套前端缓冲数据一套后端原本数据如果功能中需要增删改数据如何保持前后端数据的一致性就成了控制上的大问题。当然这种场景也是应用很广泛专门做个前端数据分页模式也有很大用处。 但后端数据分页模式也是有很多场景应用的。比如增删改查功能与其却考虑前后端数据同步还不如每次切换页就向服务端请求数据简单直接系统所有处理都只去管理后端数据即可。应该说后端数据分页的模式应用范围更为广泛而且程序操作流程及逻辑都比前端分页更为清晰也是layUI table主推的模式。
