layui 自动渲染_Layui表格自动渲染

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

开发工具与关键技术：Visual Studio 2015、C#

作者：曾浩源

撰写时间：2019年06月15日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

首先是引用layui的css和js

然后在HTML内写入一个table

最后就是初始化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: '

', 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: '

', 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 list=(查询语句

select new 实体类VO

{

实体类属性=查询出的数据

(注意实体类属性名称要和HTML内的表头field后的名称一致)如：

HTML的是field: 'user_name', 这里就是user_name=表名.对应的属性

}).ToList();

}

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

var intTotalRow = listStu.Count();

List list = listStu

.Skip(layuiTablePage.GetStartIndex())

.Take(layuiTablePage.limit)

.ToList();

LayuiTableData layuiTableData = new LayuiTableData(); ;

layuiTableData.count = intTotalRow;

layuiTableData.data = list;

return Json(layuiTableData, JsonRequestBehavior.AllowGet);

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

LayuiTablePage：

public class LayuiTablePage

{

///

/// page 代表当前页码

///

public int page { get; set; }

///

/// limit 代表每页数据量

///

public int limit { get; set; }

public int count { get; internal set; }

//分页 1.知道起始的具体的序号 2.知道具体的条数

///

/// 分页开始序号

///

///

public int GetStartIndex()

{

return (page - 1) * limit;

}

///

/// 分页结束序号

///

///

public int GetEndIndex()

{

return page * limit - 1;

}

}

LayuiTableData：

public class LayuiTableData

{

///

/// 总行数

///

public int count { get; set; }

///

/// 数据

///

public List data { get; set; }

///

/// 数据状态码 -- 可以不设置

///

public int code { get; set; }

///

/// 状态信息 -- 可以不设置

///

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"

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

$('#sreach').on('click', function () {

var type = $(this).data('type');

active[type] ? active[type].call(this) : '';

});

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