layui表格使用之重载

layui表格使用之重载(reload)

近期由于项目使用到layui，所以下班后花了点时间学习了一下layui ,记录分享一下学习心得与踩坑经验
需求描述： 按照创建时间查询xxx表数据需要支持条件输入，点击查询按钮发起查询.

步骤一：创建查询面板

留意此处查询按钮的　** data-type=“reload”**　属性，在后面触发表格查询事件时有用到．

<div class="layui-fluid">
	<div class="layui-card">
		<div class="selectOption layui-form layui-card-header layuiadmin-card-header-auto" style="padding:5px" lay-filter="meta-data-table">

			<form class="layui-form " method="post" id ="queryDataForm" style="margin-top:10px">
			<input class="layui-input layui-hide" name="tableName" id="tableName" autocomplete="off"/>
			  <!--  时间与查询触发按钮 -->
			  	<div class="layui-form-item">
				    <div class="layui-inline">
					      <label class="layui-form-label">创建日期</label>
					      <div class="layui-input-inline">
					        <input type="text" class="layui-input" id="createTime" name="createTime" placeholder=" ~ ">
					      </div>
			    	</div>
			    	<!-- 查询触发按钮 -->
					<div class="layui-inline">
				      	<a class="layui-btn query" data-type="reload">查询</a>
				    </div>
				    <!-- 查询按钮结束 -->
			    </div>
			</form>  
		</div>
		<div class="layui-card-body"  style="margin-top:5px">
			<table class="layui-table" id='meta-data-table' lay-filter="meta-data-table"></table>
			
			<script type="text/html" id="dataExportImport">
		   <div class="layui-btn-container">
	   			 <button class="layui-btn layui-btn-sm my-export" lay-event="data_export">导出</button>
	    		<button class="layui-btn layui-btn-sm" lay-event="data_import">导入</button>
	  			</div>
			</script>
		</div>
	</div>
</div>

步骤二:创建操作列模板按钮

<script type="text/html" id="edit_group">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

步骤三:使用js构建查询表格并执行重载

防坑提醒:为查询面板的查询按钮绑定单击事件时， page: {curr: 1 } 这个属性一定要加上,不然会出现按条件查询后数据有N页点击下一页也有数据，但是切换条件后点击下一页后却显示无数据的情况．

<script>
var $ = layui.$;
var layer = layui.layer;
	getColsData("emp_user");   
	render_date_input("createTime"); // 渲染日期控件 
	  
function getColsData(tableName){
	var $ = layui.$;
	$('#tableName').val(tableName);
	var colums= [
	 {type: 'checkbox', fixed: 'left'}
	 ,{field:'id', title:'ID', fixed: 'left',sort: true}
	 ,{field:'name', title:'名字', fixed: 'left',sort: true}
	   ,{field:'createTime', title:'创建日期',  fixed: 'left', templet:'<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd") }}</div>',sort: true}
	  ,{fixed: 'right', title:'操作', toolbar: '#edit_group', width:150}
	];
	  console.log("开始设置渲染表格数据");
       renderTable(colums);
  
	}

function renderTable(colums){
	  var table = layui.table;
	  table.render({
	    elem: '#meta-data-table'
	    ,height: 512
	     ,id:'hourlyDataTable'
	     ,toolbar: '#dataExportImport'
	     ,cellMinWidth: 125
    	,defaultToolbar: ['filter']
    	,where :{queryedTableName:"xxxx"}
	    ,url: '<%=request.getContextPath() %>/xxxx/xx对应你的后端查询地址' 
	    ,parseData: function(res){ //res 即为原始返回的数据
	    return {
	      "code": res.data.code, //解析接口状态
	      "msg": res.data.msg, //解析提示文本
	      "count": res.data.count, //解析数据长度
	      "data": res.data.data //解析数据列表
	    }}
	    ,page: true //开启分页
	    ,cols: [colums]
	   
	  });	
	  	var $ = layui.$;
	  	// 为查询面板的查询按钮绑定函数事件
		var reloadTable ={ reload: function(item){
			 table.reload('hourlyDataTable',{
			   page: {
                        curr: 1 
                    },
			 	where :{
			 		MIN_createTime:item.MIN_createTime,
			 		MAX_CcreateTime:item.MAX_createTime
			 	}
			 });
		}}
		
		 //头工具栏事件
	  table.on('toolbar(meta-data-table)', function(obj){
	    var layer = layui.layer;
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'data_export':
	      var errorMsg = verifyQueryForm();
	      if(errorMsg != ""){
	      	layer.msg(errorMsg.msg, {icon:5,time:1500},function(){
	      		$('#'+errorMsg.id).focus();
	      	}); 
	      	return;
	      }
	      
	      layer.confirm('确定导出条件所选的全部数据吗?', {icon: 3, title:'提示'}, function(index){
			  disableElemBySelector('.my-export');
			  layer.msg('开始导出', {
			  icon: 1,
			  time: 4000 //2秒关闭（如果不配置，默认是3秒）
			}, function(){
			  console.log('开始导出数据');
			  var $ = layui.$;
			  var form = document.getElementById("queryDataForm");
			form.action = "xxxxx/xxxxx/xximport";
	        form.submit();
			var retTime = setTimeout(function(){
			    reviewElemBySelector('.my-export');
			},2000);
			});
			  layer.close(index);
			});
	       
	      break;
	      case 'data_import':
	       importData();
	      break;
	    };
	  });
  
	  //监听行工具事件
	  table.on('tool(meta-data-table)', function(obj){
	    var data = obj.data;
	    console.log(obj);
	    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	        obj.del();
	        layer.close(index);
	      });
	    } else if(obj.event === 'edit'){
	     layer.open({
			  title:"修改数据",
			  type: 2,
			  content: '<%= request.getContextPath() %>/xxxx/xxxx/xx/data_edit.jsp',
			   area: ['400px', '550px'],
			   btn: ["保存", "取消"],
			  success: function(layero, index){
			    var editPage = window[layero.find('iframe')[0]['name']]; 
			   	editPage.setFormData(data);
			  },
			  yes: function(index,layero){
			  	var editPage = window[layero.find('iframe')[0]['name']]; 
			   	editPage.submitData();
			  },
			   cancel: function(index,layero){
			    layer.close(index); 
			  }
			}); 
	    }
	  });
		// 为查询按钮绑定查询事件
	  $('.selectOption .query').on('click', function(){
	    var type = $(this).data('type');
	    var conds = {};
	    var queryDate = $('#createTime').val();
	    var dates =[];
	    if(queryDate != undefined && queryDate != ''){
	    	dates = queryDate.split("~");	
	    }
	    var minCollDate = dates.length>0?dates[0].trim():"";
	    var maxCollDate = dates.length>1?dates[1].trim():"";
	    conds.MIN_createTime = minCollDate;
	    conds.MAX_createTime = maxCollDate;
	    console.log('调用重载函数发送请求查询数据,请求参数为:');
	    console.log(conds);
	    if(conds=={})conds = null;
	    // 此处调用js函数解析传递输入参数
	    reloadTable[type] ? reloadTable[type](conds) : '';
	
	  });
 }
	//　自定义表单验证方法
	 function verifyQueryForm(){
	 	
	 	var createTime = $("#createTime").val();
	 	if(createTime.trim()==""){
	 		return { 'msg':"创建日期不能为空!!",'id':"createTime"};
	 	}
	 	return "";
	 }
		
	
	function disableElemBySelector(selector) {
		 $(selector).attr('disabled',true);
		$(selector).addClass('layui-disabled');	
	}
	function reviewElemBySelector(selector) {
		 $(selector).attr('disabled',false);
		$(selector).removeClass('layui-disabled');	
	}
		function render_date_input(elemID){
			var laydate = layui.laydate;
			 //日期范围
	  		laydate.render({
		    elem: '#'+ elemID
		    ,format:'yyyy-MM-dd'
		    ,range: '~'
	  		});
		}
</script>