Layui 简单使用(部分 待补充)

配置

使用时可以不引用 jQuery文件 layui 内置了 jQuery文件

使用第三方插件的时候 需要进行全局配置
layui.config(options);

在这里插入代码片

模块化使用，根据需要使用引用模块[‘element’, ‘layer’, ‘util’]

layui.use({ ['element']，function(){
		//相当于js的入口函数
		// 调用组件 代码
})  

栅格系统

一行分为12个格子

layui-row(样式名class) 定义行 <div class="layui-row"></div>
layui-col-md 定义列 并且在行中 md是可以替换其他样式(xs/sm/md/lg/xl)
layui-col-md-offset3 列偏移
layui-col-space5 列间距

需要将 栅格系统 放入layui-container此容器中

<div class="layui-container">
  <div class="layui-row">
    ……
  </div>
</div>

from表单

行 layui-form-item
需要多个控件放入一行 layui-inline
需要控件独行显示 layui-input-block

在这里插入代码片

表格

两种渲染

1. 模板渲染（自动渲染 直接在html页面绑定数据）
   需要使用lay-data={ } 绑定到页面上 2.8版本后推荐使用 lay-options="{}" 但也兼容lay-data={ }

2. 静态表格渲染（简单将静态数据 转换 成表格）

3. 动态数据的渲染（动态数据 方法渲染）
   通过table.render({}) 渲染
   相当于发送了一个ajax请求 获取到的是json格式数据

//引用layui
layui.use('table',function(){  //模块化加载 [多个用,分割] table可以省略 
  var table = layui.table;     //表格对象声明
	table.render({             //表格渲染
		elem:"#id", 					//元素选择器进行选择 id/类...
		url:"",					    //从哪里获取数据,动态 从后台路径取出来 
		//[toolbar/defaultToolbar:""] 工具栏绑定
	  cols:[[							//列的数据
	  		{field:'数据的列值',title:'数据的列名',fixed: '位置', width:80, sort: true/*是否开启排序*/}
	  ]], 
	  done: function(){
			//表格渲染完成后 触发的方法
		}, 
		success:function(){
				//渲染成功,触发
		}
		 ,error: function(res, msg){
				//渲染失败,触发
      		console.log(res, msg)
    	}
	})
})

表格后台获取数据

1. 后台返回数据格式 必须严格根据格式返回数据

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

//使用上下文类获取查询的结果集
List<PaperTypes> plist = db.PaperTypes.ToList();
//传递json格式
ljson.code = 0;
ljson.msg = "";
ljson.count= 1000;
ljson.data = plist;

//ljson.Data = JsonConvert.SerializeObject(plist);//可以通过序列化json后返回字符串(前台会自动反序列化)；
return Json(ljson, JsonRequestBehavior.AllowGet);//也可以直接返回json格式数据

2. 返回自己定义的json 返回的数据也可以在前台进行处理

//渲染表格的时候的属性
 parseData: function(res){ // res 即为原始返回的数据
    return {
      "code": res.status, // 解析接口状态
      "msg": res.message, // 解析提示文本
      "count": res.total, // 解析数据长度
      "data": res.data.item // 解析数据列表
    };
  },

表格分页