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