layui&layer 常用操作

表格+分页+筛选

layui.use(['table'], function () {
	var table = layui.table;
	table.render({
		elem: '#order_data'
		, url: "{:url('rateData')}"
		, size: 'lg'
		, cols: [[
			{ type: 'checkbox', fixed: 'left' }
			, { field: 'order_number', title: '订单编号', align: 'center' }
			//时间格式化
			, { field:'createDate', title: '退货日期',templet:'<div>{{ layui.util.toDateString(d.createDate*1000, "yyyy-MM-dd HH:mm:ss") }}</div>',minWidth:150}
		]]
		, id: 'idTest'
		, page: true
		, height: 'full-300'
		, limits: [5, 10, 20, 50, 100, 150]
		, limit: 10 //每页默认显示的数量
		//,curr: 2
	});
	
	var $ = layui.$, active = {
		reload: function () {
			//执行重载
			table.reload('idTest', {
				page: {
					curr: 1 //重新从第 1 页开始
				}
				, where: {
					order_number: $("#order_number").val()
				}
			});
		}
	};
}

图片上传

var uploadInst = upload.render({
		elem: '#test1'
		, url: "{:url('Common/Common/imgupdate')}"
		, before: function (obj) {
			//预读本地文件示例，不支持ie8
			obj.preview(function (index, file, result) {
				$('#product_pic').attr('src', result); //图片链接（base64）
			});
			layer.msg('图片上传中...', {
				icon: 16,
				shade: 0.01,
				time: 0
			})
		}
		, done: function (res) {
			layer.close(layer.msg());//关闭上传提示窗口
			//如果上传失败
			if (res.code > 0) {
				return layer.msg('上传失败');
			}
			//上传成功
			$("#goods_image").val(res.file);
		}
		, error: function () {
			//演示失败状态，并实现重传
			var demoText = $('#demoText');
			demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
			demoText.find('.demo-reload').on('click', function () {
				uploadInst.upload();
			});
		}
	});
});

时间组件

//获取当前时分 
 laydate.render({
 	elem: '.laydate-format'
 	, type: 'time'
 	, min: '01:00:00'//最小设置 可不设置
 	, format: 'H点M分'
 });
//获取年月日
 laydate.render({
	elem: '#test11'
	, min: '01:00:00'//最小设置 可不设置
 	, format: 'yyyy年MM月dd日'
 });

弹窗

layer.msg(data.msg, {
	skin: "#ff0080",
	icon: 1, //1=√ 2=X
	time: 1000,
}, function () {
	location.reload();
});

弹出层

layer.open({
	type: 2,
	title: '弹出层',
	shadeClose: true,
	shade: 0.8,
	anim: -1,
	id: 'layadmin-layer-skin-test',
	skin: 'layui-anim layui-anim-upbit',
	area: ['600px', '700px'],
	content: ["http://www.baidu.com"], //iframe的url
	end: function () {}
});

关闭弹出层

yes: function (index, layero) {
   layer.close(index);
}

确认层

layer.confirm('确认放弃该订单的评价？', {
	btn: ['确认', '关闭'] //按钮
}, function () {

}, function () {

});

提示层

layer.tips('11111', '.demo-component-layer', {
 	tips: 3, time: 5000
});

图片展示层

 layer.photos({
 	photos: { "data": [{ "src": data.goods_image }] } //格式见API文档手册页
     , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
 });

tab切换

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>
 
<script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
</script>