Layui表格自动渲染

开发工具与关键技术：Visual Studio 2015、C#
作者：曾浩源
撰写时间：2019年06月15日

首先是引用layui的css和js
然后在HTML内写入一个table

<div class="layui-card-body ">
    		<table id="tabTitle" layui-filter="tabTitle"></table>
</div>

最后就是初始化layui表格了

一、获取到layui的table

 	layui.use('table', function () {
		var layuiTable = layui.table;
	}

二、执行渲染：

1、elem: #或. 指定原始表格元素选择器（推荐id选择器）

2、url: 数据接口（控制器查询方法）当是多条件查询时，这不需要写

3、where: 条件查询，传参数(键值对)，可不写（用于一初始化就进行条件查询）

4、cols: 设置表头：

cols: [[
{ field: 'id', hide: 'true'},
{ templet: ToState, title: '状态', width: 150, align: 'center' },
{ field: 'img_url', title: '图片', width: 80, align: 'center', templet: '<div><img 	class="borders" src="{{ d.img_url}}" width="50" height="50" 	οnclick="showUrl(this)"></div>', style: 'height:100%;!important;' },
{ field: 'user_name', title: '添加人', width: 80, align: 'center' },
{ title: '操作', templet: setOperate, width: 302, align: 'center' }
]],

如：以上5中常见的用法：属性与属性之间用（英文）逗号分开

（1）第一行存储id便于后续的操作，id不能展示出来，所以可以使用对应的属性隐藏hide: ‘true’，因为是隐藏的可以不用设置其他样式

（2）第二行是调用外部的方法，方法返回的数据进行数据渲染，并设置了宽度width: 150，align: 'center’和文字居中。

方法如：
方法拥有参数：data也就是数据
在方法内可自己随机改动显示的方式，例如：
1、传过来的值时boolean值时，可进行if判断为true显示正确，false显示错误。
2、传过来权限id，拥有什么操作，用if判断后再使用字符串拼接显示
3、例子:状态的显示

function ToState(data) {
	var array = [];
	if (data.status == 0) {
		array.push("正常");
	}
	else if (data.status == 1) {
   		array.push("未审核"); 
	}
	else if (data.status == 2) {
   		array.push("锁定");
	}
	return array;
}

（3）第三行templet当然不单单只有这个这个功能，还有很多，非常强大，如：寻常的图片显示。可以在templet内直接写入html内容：

 	templet: '<div><img class="borders" src="{{ d.img_url}}" width="50" height="50" 	οnclick="showUrl(this)"></div>', style: 'height:100%;!important;'

（4）第四行是最基础的用法，就不用多说了

（5）第五行也是templet，这里是调用外部方法，返回显示几个按钮

最后就是分页：
最简单的就是

 	page: true,

要精细一点就是可以让用户自己调整一页显示多少数据：

	page: {
		limit: 10,//指定每页显示的条数
		limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
	}, //开启分页

HTML页面的代码基本完成了，到控制器： 查询所需的数据，如：

public ActionResult SelectArticle(LayuiTablePage layuiTablePage){
	List<实体类VO> list=(查询语句
						select new 实体类VO 
							{
								实体类属性=查询出的数据
								(注意实体类属性名称要和HTML内的表头field后的名称一致)如：
								HTML的是field: 'user_name',  
      							这里就是user_name=表名.对应的属性
							}).ToList();
}

最后就是产出layui需要的参数了

var intTotalRow = listStu.Count();  
List<ArticleVo> list = listStu
    .Skip(layuiTablePage.GetStartIndex())
    .Take(layuiTablePage.limit)
    .ToList();

LayuiTableData<ArticleVo> layuiTableData = new LayuiTableData<ArticleVo>(); ;
layuiTableData.count = intTotalRow;
layuiTableData.data = list;
return Json(layuiTableData, JsonRequestBehavior.AllowGet);  

这里的LayuiTableData和LayuiTablePage是可以自己封装起来的类，里面的参数是layui表格需要的，如:

LayuiTablePage：
public class LayuiTablePage
    {
        /// <summary>
        /// page 代表当前页码
        /// </summary>
        public int page { get; set; }
        /// <summary>
        /// limit 代表每页数据量
        /// </summary>
        public int limit { get; set; }
        public int count { get; internal set; }
        //分页  1.知道起始的具体的序号  2.知道具体的条数
        /// <summary>
        /// 分页开始序号
        /// </summary>
        /// <returns></returns>
        public int GetStartIndex()
        {
            return (page - 1) * limit;
        }
        /// <summary>
        /// 分页结束序号
        /// </summary>
        /// <returns></returns>
        public int GetEndIndex()
        {
            return page * limit - 1;
        }
}

LayuiTableData：

public class LayuiTableData<T>
    {
        /// <summary>
        /// 总行数
        /// </summary> 
        public int count { get; set; }
        /// <summary>
        /// 数据
        /// </summary>
        public List<T> data { get; set; }
        /// <summary>
        /// 数据状态码 -- 可以不设置
        /// </summary>
        public int code { get; set; }
        /// <summary>
        /// 状态信息 -- 可以不设置
        /// </summary>
        public string msg { get; set; }
    }
想要多条件查询也很简单：设置完多条件查询的文本框或下拉框后，在layui.use内继续写：
//多条件查询table
    var active = {
//注释：layui 搜索模块 Start
		reload: function () {
         	layuiTable.reload('tabTitle', {
             		page: {
                 		curr: 1
                	},
                	where: {
                		需要传的参数（键） : 查询的条件 即：文本框或下拉框的值（值）  
                	},
             	});
       	},
 	}

这是html内查询按钮的样式属性，必须要有 data-type=“reload”

<button type="button" id="sreach" class="layui-btn" data-type="reload" lay-filter="sreach">
	<i class="layui-icon">&#xe615;</i> 
</button>

这然后这里就可以根据这个属性调用多条件查询方法

$('#sreach').on('click', function () {
	var type = $(this).data('type');
	active[type] ? active[type].call(this) : '';
});

传到控制器方法的参数，也要在控制器方法接收参数，接收参数后根据参数处理数据。