layui使用总结

1

//config的设置是全局的
layui.config({
  base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
  ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({
  mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})
 
//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
  var mymod = layui.mymod
  ,mod1 = layui.mod1
  ,mod2 = layui.mod2;
  
  mymod.hello('World!'); //弹出 Hello World!
});

例子

layui.config({
	base : 'static/layuiadmin/' //静态资源所在路径
}).extend({
	index : 'lib/index' //主入口模块
}).use([ 'index', 'form', 'layer','table','laypage' ], function() {
	var $ = layui.$,						
		layer = layui.layer,
		table=layui.table,
		laypage=layui.laypage,
		form = layui.form;

2表单
表单渲染例子

//渲染表单
		form.render();
		
		var usertable = table.render({
			elem : '#user_table',
			url : 'admin/user/queryData',
			response: {
			      statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
			    },  
			parseData:function(res){//res 即为原始返回的数据
			    res =$.parseJSON(res);
		
			return res;
			},
			cols : [ [
				 {
					field : 'username',
					width : '15%',
					title : '用户名',
					align : 'center'
				}
				, {
					field : 'stuid',
					width : '15%',
					title : '学号',
					align : 'center'
				}
				, {
					field : 'stuname',
					width : '15%',
					title : '姓名',
					align : 'center'
				}
				, {
					field : 'gender',
					width : '10%',
					title : '性别',
					align : 'center'
				}
				, {
					field : 'birthday',
					width : '15%',
					title : '出生日期',
					align : 'center'
				}
				, {
					field : 'classname',
					width : '15%',
					title : '班级',
					align : 'center'
				}				
				, {
					field : 'address',
					width : '15%',
					title : '籍贯',
					align : 'center'
				}
			] ],
			page : {
				layout : [ 'count', 'prev', 'page', 'next', 'limit' ], //,curr: 5 //设定初始在第 5 页
				prev : '上一页',
				next : '下一页',
				first : '首页',
				last : '尾页'
			},
			text : {
				none : '暂无相关数据'
			},
			loading : true
		});

官方文档中相应解释

var table = layui.table;
 
//执行渲染
table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});
    

具体参数解释查看
https://www.layui.com/doc/modules/table.html
定位到基础参数一览表

数据格式和接口
返回数据要满足table格式

{
  "code": 0,
  "msg": "",
  "count": 1000,
  "data": [{}, {}]
} 

例子中用到response 参数

您还可以借助 response 参数来重新设定返回的数据格式，如：

codelayui.code
table.render({
  elem: '#demp'
  ,url: ''
  ,response: {
    statusName: 'status' //规定数据状态的字段名称，默认：code
    ,statusCode: 200 //规定成功的状态码，默认：0
    ,msgName: 'hint' //规定状态信息的字段名称，默认：msg
    ,countName: 'total' //规定数据总数的字段名称，默认：count
    ,dataName: 'rows' //规定数据列表的字段名称，默认：data
  } 
  //,…… //其他参数
});     

3查询操作时
需要表格重载
例子

//执行查询操作
		$("#query-submit").on("click", function() {
			var username=$('#username').val();	        	
        	var stuid=$('#stuid').val();
        	var stuname=$('#stuname').val();
        	var gender=$('input[name="stuinfo.gender"]:checked').val();	
        	//构建json字符串
			var json = {};
			var stuinfo={};
			stuinfo.stuid=stuid;
			stuinfo.stuname=stuname;
			stuinfo.gender=gender;
			json.username=username;
			json.stuinfo=stuinfo;
			var data = JSON.stringify(json);
			
			usertable.reload({							
				where : {
					data:data
				}
			});

官网中解释

//这里以搜索为例
tableIns.reload({
  where: { //设定异步数据接口的额外参数，任意设
    aaaaaa: 'xxx'
    ,bbb: 'yyy'
    //…
  }
  ,page: {
    curr: 1 //重新从第 1 页开始
  }
});

例子中用到了监听事件
官网中解释

//监听事件
table.on('toolbar(test)', function(obj){
  var checkStatus = table.checkStatus(obj.config.id);
  switch(obj.event){
    case 'add':
      layer.msg('添加');
    break;
    case 'delete':
      layer.msg('删除');
    break;
    case 'update':
      layer.msg('编辑');
    break;
  };
});

5弹出层
例如

<!-- 添加编辑部分 -->
	<div class="hidden" id="edituser" >
		<form class="layui-form" id="user_form">

else if (obj.event === 'edit') {	
				//显示弹出窗口
	        	$("#edituser").prop("style","display:block;margin:10px;");	        	
	        	$('#cname').val(data.cname);
	        	
	        	$('#cid').val(data.cid);
	        					
				form.render();
				
	        	layer.open({
	        		title : '修改用户',
	    			shadeClose : true,
	    			area : ['650px', '450px'],
	        		type: 1,
	        		content: $('#edituser'),
	        		//隐藏弹出窗口
	        		end: function(){
	        			$("#edituser").prop("style","display:none;");
	        		}
	        	});

官网中简单解释

layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});