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);
		   }
	}); 
});
posted @ 2020-09-22 16:00  威武的大萝卜  阅读(1115)  评论(0编辑  收藏  举报