• 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: '签约部门',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: '审批人',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', 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);
    		   }
    	}); 
    });
  • 相关阅读:
    java技术用ssh从linux服务器下载数据
    linux 常见操作命令
    IP地址归属地查询
    【转】Java检测字符串是否有乱码
    maven install 跳过test方法
    echarts实现动态传入数据刷新【可执行】
    echarts报错Cannot read property 'features' of undefined
    【java web】Caused by: java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory
    程序员,我们都是夜归人【转】
    程序员你为什么这么忙?【转】
  • 原文地址:https://www.cnblogs.com/onesea/p/13712761.html
Copyright © 2020-2023  润新知