layui table php,layui table组件常见用法总结

table是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载(比如搜索、条件筛选等)，支持复选框，支持分页，支持单元格编辑等等一些列功能。

下边整理了一个例子：

layer学习

编辑

删除

layui.use(['table','form'], function () {

var table = layui.table;

form = layui.form;

//*******************************渲染表格**********************************

table.render({

//------------------------核心参数

elem: '#myTable' //渲染的dom元素

, url: '/Home/GetUserList' //异步请求接口

, page: true //开启分页

, id: 'elementID' //容器唯一ID

, cols: [[ //列设置

{ field: 'Id', title: '编号', sort: true, fixed: 'left' }

, { field: 'Name', title: '姓名' }

, { field: 'Age', title: '年龄' }

, { field: 'Role', title: '角色' }

, { field: 'CreateTime', title: '创建时间' }

, {

title: '自定义模板', width: 200

, templet: function (d) {

return '姓名：' + d.Name + ''

}

}

, { field: 'IsAllow', title: '是否使用', templet: '#allow', unresize: true, align: 'center' }

, { fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo' }

]]

//-----------------------------异步请求设置

, method: 'post' //异步请求方式

, headers: { hello: 'hengheng' } //在request的header中添加数据

, request: { //request设置，默认值如下

pageName: 'page',

limitName: 'limit'

}

, response: { //response设置，默认值如下

statusName: 'code'

, countName: 'count'

, dataName: 'data'

, msgName: 'msg'

}

, where: { //向后台添加的额外参数

nameParm: 'u',

roleParm: 'o'

}

//-----------------------加载的其他选项

, done: function (res, curr, count) {

//res为接口返回的数据、count为数据总长度

console.log(res);

console.log(curr);

console.log(count);

}

, text: {

none: '暂无相关数据' //默认：无数据。

}

, initSort: {

field: 'Id' //排序字段为Id

, type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序

}

})

//*******************************监听表格**********************************

table.on('tool(test)', function (obj) { //test为lay-filter值

var data = obj.data; //获得当前行数据

var layEvent = obj.event; //获得 lay-event

var tr = obj.tr; //获得当前行 tr 的DOM对象

if (layEvent === 'edit') {

var id = data.Id;

layer.open({

type: 2

, title: '修改' //标题栏

, scrollbar: false

, area: ['400px', '300px']

, shade: 0.5

, id: 'layerId' //设定一个id，防止重复弹出

, moveType: 1 //拖拽模式，0或者1

, content: '/Home/EditUserInfo?id=' + id

});

} else if (layEvent === 'del') {

layer.confirm('真的删除吗？', function (index) {

obj.del(); //删除对应行(tr)的DOM结构

layer.close(index);

var id = data.Id; //向服务端发送删除指令

$.post("/Home/DeleteUserInfo", { "id": id }, function (result) {

if (result.IsSuccess === 1) {

layer.msg(result.Msg);

table.reload('elementID');

} else {

layer.msg(result.Msg);

table.reload('elementID');

}

})

});

}

});

//*******************************监听checkbox********************************

//监听操作----置顶

form.on('checkbox(allowSetFilter)', function (obj) {

var pre = {

"Id": this.name,

"IsAllow": obj.elem.checked

};

//alert(this.name+'----'+obj.elem.checked);

$.post('/Home/SetAllow', pre, function (result) {

if (result.IsSuccess === 1) {

layer.msg(result.msg)

} else {

layer.msg(result.msg)

}

})

});

});

更多layui知识请关注layui使用教程栏目。