layui回顾

表格

简单的表格实例使用，主要用作笔记回顾，更多详细的api可以看官网哦。
传送门：layui-table官网实例
1.引入&页面html

<link rel="stylesheet" href="layui/css/layui.css" />
<link rel="stylesheet" href="layui/css/layui.css" />
//html
<!--表格  -->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!-- 表格 end -->
<!--事件-->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit" style="font-size: 30px; color: #fff;"></i>编辑</a>
</script>

2.js

layui.use('table', function(){
	  var table = layui.table;
	  var editstatus=false;
	  if(userPerm==0)editstatus=true
	  table.render({
	    elem: '#test',
	    url:'getNetWorkRemovalStion.action',
	    title: '用户数据表',
	    method:'post',
	    cols: [[
	  	      {field:'id', title:'编号', width:180, fixed: 'left', sort: true,event: 'box-pop', style:'cursor: pointer;'}
	  	      ,{field:'removalTimeOld', title:'搬迁时间', width:110,templet: function(d){
	  	        return d.removalTimeOld?d.removalTimeOld.split('T')[0]:''
	  	      }}
	  	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:100,hide:editstatus}
	  	    ]]
	  	  ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
	  	      layout: [  'prev', 'page', 'next', 'count','skip'] //自定义分页布局
	  	    }
	  	  ,where: {status:2,city:'',removalTimeNew:''} //如果无需传递额外参数，可不加该参数
	  	  ,request: {
	  	        pageName: 'pageNo' //页码的参数名称，默认：page
	  	        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
	  	    }
	  	  ,parseData: function(res){ //res 即为原始返回的数据
	  	        return {
	  	          "code": res.code, //解析接口状态
	  	          "msg": res.msg, //解析提示文本
	  	          "count": res.data.page.totalRows, //解析数据长度
	  	          "data": res.data.list //解析数据列表
	  	        };
	  	  },
	  	  id:'testReload'
	  });
	  
//这个是搜索,第一种需要设置id，比如上面我设为testReload
	   var $ = layui.$, active = {
	    reload: function(){
	      table.reload('testReload', {
	        page: {
	          curr: 1 //重新从第 1 页开始
	        }
	        ,where: {
	        	city:$('.seach-city').val(),
	        	removalTimeNew:$('#removalTimeNew').val()
	        }
	      }, 'data');
	    }
	  };
	  
	  $('.seachBtn').on('click', function(){
	    var type = $(this).data('type');
	    active[type] ? active[type].call(this) : '';
	  }); 
	  
	  //监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;
	   // console.log(obj)
	    if(obj.event === 'edit'){
			//编辑
	    }else if(obj.event === 'check'){
	    //核验
	    }else if(obj.event === 'box-pop'){//弹出框
	    	//事件
	    }
	  });
	
	});

3.搜索的第二种写法

	  var tableIns=table.render({
	    elem: '#test',
	    url:'',
	    title: '用户数据表',
	    method:'post',
	    cols: []
	  ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
	      layout: [  'prev', 'page', 'next', 'count','skip'] //自定义分页布局
	    }
	  ,where: {status:5,city:'',removalTimeNew:''} //如果无需传递额外参数，可不加该参数
	  ,request: {
	        pageName: 'pageNo' //页码的参数名称，默认：page
	        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
	    }
	  ,parseData: function(res){ //res 即为原始返回的数据
	        return {
	          "code": res.code, //解析接口状态
	          "msg": res.msg, //解析提示文本
	          "count": res.data.page.totalRows, //解析数据长度
	          "data": res.data.list //解析数据列表
	        };
	  }
	  });
	  	$('.seachBtn').on('click', function(){
			tableIns.reload({
			  where: { //设定异步数据接口的额外参数，任意设
				  city:$('.seach-city').val(),
		          removalTimeNew:$('#removalTimeNew').val(),
		          status:status
			  }
			  ,page: {
			    curr: 1 //重新从第 1 页开始
			  }
			});
		});

4.编辑
需要col里面写上edit: ‘text’

//监听单元格编辑这个需要元素edit: 'text'
 table.on('edit(test)', function(obj){
    var value = obj.value //得到修改后的值
	var data=obj.data;
    console.log(obj)
  });

laydate

1.单独使用可以引入laydate
2.如果你的页面已经使用了 layui，推荐你直接采用 layui 内置的 layDate 模块，请勿再重复引用独立版的 laydate.js
传送门：laydate独立版
1.单独使用

	//设置开始时间
	var startDate = laydate.render({
	    elem: '#start_time',
	    //value:ttime,
	    max:ttime,
	    done: function (value, date) {
	    	if (value !== '') {
	            endDate.config.min.year =  date.year;
	            endDate.config.min.month = date.month-1;
	            endDate.config.min.date = date.date;
	        } else {
	            endDate.config.min.year = '';
	            endDate.config.min.month = '';
	            endDate.config.min.date = '';
	        }
	    }
	});
	//设置结束时间
	var endDate = laydate.render({
	    elem: '#end_time',
	    //value:end,
	    max:end,
	    done: function (value, date) {
	    	if (value !== '') {
	            startDate.config.max.year = date.year;
	            startDate.config.max.month = date.month - 1;
	            startDate.config.max.date = date.date;
	        } else {
	            startDate.config.max.year = '';
	            startDate.config.max.month = '';
	            startDate.config.max.date = '';
	        }
	    }
	});

2.模块使用

	layui.use('laydate', function(){
		  var laydate = layui.laydate;
		  //执行一个laydate实例
		  laydate.render({
		    elem: '#time' //指定元素
		  });
		});

layer

弹出层跟laydate一样，也可以引入单独版或者在模块中使用
主要注意点：当使用confirm的时候，点击否的时候不会消失
解决方法：parent.layer.closeAll()
传送门：layer的demo