layui数据表格。表头,表行,表格内容,事件监听


 

在这里插入图片描述

1.数据表格列表渲染

<script> layui.config({ base: "${base}/resources/layui/lay/mymodules/" }).extend({ //设定模块别名 tablePlug: 'tablePlug/tablePlug' //相对于上述 base 目录的子目录 }).use(['layer','form','table','laydate','tablePlug','element','util'], function(){ var layer = layui.layer //弹层 ,table = layui.table //表格 ,element = layui.element //元素操作 ,util = layui.util//工具集 ,laydate = layui.laydate ,tablePlug = layui.tablePlug ,form = layui.form,$=layui.$; tablePlug.smartReload.enable(true);//开启智能重载模式 $.ajaxSetup({cache:false});//设置IE下ajax不缓存 laydate.render({ elem: '#fromDate' ,max:layui.util.toDateString('${toDate}','yyyy-MM-dd') ,done: function(value, date, toDate){ toDate.config.min = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: date.seconds } } }); laydate.render({ elem: '#toDate' ,min:layui.util.toDateString('${fromDate}','yyyy-MM-dd') ,done: function(value, date, fromDate){ fromDate.config.max = { year: date.year, month: date.month - 1, date: date.date, hours: date.hours, minutes: date.minutes, seconds: date.seconds } } }); //对表格进行渲染 var tableIns = table.render({ elem: '#contract_other_list' //表格数据的id ,toolbar: '#toolbarDemo' //表格行的事件 ,smartReloadModel: true ,defaultToolbar: ['exports','print']//表单头部导出与打印 ,url: "${base}/contractother/contractotherlist.htm?"+encodeURI($('#queryForm').serialize()) //数据接口 ,page: true //开启分页 ,limit:10 ,limits:[10,20,30] ,cols: [[ //表头 {type:'numbers'} ,{field: 'contractId', title: '合同编号',width:98,align:'center',style:'text-align: center;'} ,{field: 'contractName',title: '简要说明',minWidth:120,align:'center',style:'text-align: center;'} ,{field: 'typeName',title: '合同类型',width:70,align:'center',style:'text-align: center;'} ,{field: 'vendorName',title: '供应商',minWidth:180} //,{field: 'deptName',title: '签约部门',width:105,align:'center',style:'text-align: center;'} ,{field: 'serviceUser',title: '维护人',width:70,align:'center',style:'text-align: center;'} ,{field: 'signDate',title: '签约日期',width:90,align:'center',style:'text-align: center;' ,templet: function(d){ var date=d.signDate; date=date.replace(new RegExp(/-/gm) ,"/"); return layui.util.toDateString(date,'yyyy-MM-dd'); } } ,{field: 'startDate',title: '开始日期',width:105,align:'center',style:'text-align: center;',hide:true} ,{field: 'endDate',title: '服务期',minWidth:100,align:'center',style:'text-align: center;' ,templet: function(d){ var startDate=d.startDate.replace(new RegExp(/-/gm) ,"/"); var endDate=d.endDate.replace(new RegExp(/-/gm) ,"/"); return layui.util.toDateString(startDate,'yyyy-MM-dd') +'&nbsp;'+ layui.util.toDateString(endDate,'yyyy-MM-dd'); } } ,{field: 'amount',title: '合同金额',width:82,align:'center',style:'text-align: center;'} ,{field: 'status',title: '审批状态',width:70,align:'center',style:'text-align: center;',toolbar: '#barDemo'} // ,{field: 'processUser',title: '审批人',width:82,align:'center',style:'text-align: center;'} ,{field: 'archiveStatus',title: '归档状态',width:70,align:'center',style:'text-align: center;' ,templet: function(d){ if(d.archiveStatus == '1'){ var archiveTime=d.archiveTime.replace(new RegExp(/-/gm) ,"/"); return "<font color=green>已归档</font>&nbsp;"+d.archiveUser+"&nbsp;"+layui.util.toDateString(archiveTime,'yyyy-MM-dd'); }else{ if(${assfn:listEquals(mainAuths,'ARCHIVE') ==2} && 11 == d.status){ return "<font color='red'>未归档</font>"; }else{ return "<font color='red'>未归档</font>"; } } } } ,{field: 'archiveUser',title: '归档人员',width:102,align:'center',style:'text-align: center;',hide:true} ,{field: 'archiveTime',title: '归档日期',width:102,align:'center',style:'text-align: center;',hide:true} ,{field: 'recordUser',title: '登记人',width:75,align:'center',style:'text-align: center;'} ,{field: 'recordTime',title: '登记日期',width:82,align:'center',style:'text-align: center;' ,templet: function(d){ var recordTime=d.recordTime?d.recordTime.replace(new RegExp(/-/gm) ,"/"):''; return layui.util.toDateString(recordTime,'yyyy/MM/dd'); } } //,{field:'timeStamp',title:'TimeStamp', width:10,hide:true} ,{title: '操作',width:270,align:'center',style:'text-align: center;',fixed:'right',toolbar: '#barEdit'} ]] ,parseData: function(res){ //res 即为原始返回的数据 //console.log(JSON.stringify(res.rows[0])); return { "code": '0', //解析接口状态 "msg": '', //解析提示文本 "count": res.records, //解析数据长度 "data": res.rows //解析数据列表 }; } }); </script> 
  • 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
  • 117

2.表头事件监听

<script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="addRowData">新建其他合同</button> <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="viewRowData">查看作废合同</button> </div> </script> //头工具栏事件 要写在use(['layer','form',,,], function(){ 花括号内 table.on('toolbar(test)', function(obj){ switch(obj.event){ case 'addRowData': editRow('',1,0); break; case 'viewRowData': viewRowData(); break; case 'isAll': break; }; }); /* addOrEdit;//0:查看;1:添加;2:修改;5:审核 updateType;//修改类型:0,新增;1,普通修改;2,特殊修改(指的是对已经审批通过或归档的合同进行的修改,需要记录历史) */ function editRow(contractId,addOrEdit,updateType){ var title = 0==addOrEdit?'查看合同':1==addOrEdit?'添加合同':2==addOrEdit?'修改合同':''; layer.open({ type: 2, title:title, maxmin:true, id:'editRow', shadeClose: true, shade: 0.8, offset: '50px', area: ['915px', '750px'], content:'${base}/contractother/before2addoredit.htm?addOrEdit='+addOrEdit+'&moduleId=${moduleId}&updateType='+updateType+'&contractId='+contractId ,cancel: function(index, layero){ tableReload();//重新加载表格数据 layer.close(index); } }); } //查看作废合同 function viewRowData(){ var title = '已作废合同'; layer.open({ type: 2, title:title, maxmin:true, id:'viewRowData', shadeClose: true, shade: 0.6, offset: '50px', area: ['900px', '630px'], content:'${base}/contractother/viewotherdel.htm' ,cancel: function(index, layero){ tableReload(); layer.close(index); } }); } 
  • 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

3.监听表行操作栏事件

查看,修改,变更事件,都是使用layui的弹出层,根据相同方法不同参数,会跳到一个同一个编辑信息页面。
提交审批,作废则是直接进行后台处理,不用过多的页面效果,使用的是ajax事件提交(也可以使用layui的方式)。

//操作按钮 <script type="text/html" id="barEdit"> <a href='javascript:void(0)' class="layui-btn layui-btn-xs" lay-event="viewRow">查看</a> {{# if(d.status == 11 ){ }} <a href='javascript:void(0)' class="layui-btn layui-btn-warm layui-btn-xs" lay-event="changeServiceUser">维护人</a> <a href='javascript:void(0)' class="layui-btn layui-btn-xs" lay-event="changeRow">变更</a> {{# } }} {{# if(d.status != 11 ){ }} <a href='javascript:void(0)' class="layui-btn layui-btn-xs" lay-event="editRow">修改</a> <a href='javascript:void(0)' class="layui-btn layui-btn-xs" lay-event="startApprove">提交审批</a> {{# } }} <a href='javascript:void(0)' class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteRow">作废</a> </script> //监听工具条 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'startApprove'){ startApprove(data.contractId); } else if(obj.event === 'viewRow'){//查看 editRow(data.contractId,0,0); } else if(obj.event === 'editRow'){//修改 editRow(data.contractId,2,1); } else if(obj.event === 'changeRow'){ editRow(data.contractId,2,2); }else if(obj.event === 'changeServiceUser'){ changeServiceUser(data.contractId); }else if(obj.event === 'deleteRow'){//作废 deleteRow(data.contractId); } }); //提交审批 function startApprove(contractId){ layer.confirm('是否确认提交审批?', {offset: '120px',icon: 3, title:'提示'}, function(index){ $.ajax({ type: "POST", url: "${base}/contractother/startapproveworkflow.htm?contractId="+contractId, error:function(){ layer.msg('请求失败!', {icon: 5}); }, success: function(msg){ if(msg=='success'){ layer.msg("提交成功!", {icon: 6}); tableReload(); }else{ layer.msg(msg, {icon: 5}); } } }); layer.close(index); }); } //作废合同 function deleteRow(contractId){ layer.confirm('是否要作废合同?', {offset: '120px',icon: 3, title:'提示'}, function(index){ $.ajax({ type: "POST", url: "${base}/contractother/changeisenabled.htm?contractId="+contractId, error:function(){ layer.msg('请求失败!', {icon: 5}); }, success: function(){ layer.msg("提交成功!", {icon: 6}); tableReload(); } }); layer.close(index); }); } 
  • 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

自定义表格内容事件

例如当我门点击维护人的名字时,会弹出一个页面,显示维护人的个人信息。
通过id去定义一个事件,使用js的模态窗口(也可以使用其他方式)


//新建维护人的表格 <label class="layui-form-label">*新维护人</label> <div class="layui-input-inline"> <input type="text" id="serviceUserName" name="serviceUserName" readonly autocomplete="off" placeholder="单击此处选择用户" class="layui-input"> </div> $("#serviceUserName").bind("click",function(){ //模态窗口弹出的弹出层 $myPopup.showModalDialog('${base}/useroms/before2userlist4selectpage.htm','845px', '514px',function(user){ if(user){ $("#serviceUser").val(user.userId); $("#serviceUserName").val(user.realName); } }); });


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM