Layui table 示例
<link rel="stylesheet" href="lib/layui/css/layui.css" media="all">
<table id="demo" lay-filter="test"></table>
<script src="lib/layui/layui.js"></script>
<script>
layui.use('table',
function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
, height: 312
// , url: '/demo/table/user/' //数据接口
, url: 'common/Getdatatwo.ashx'
, page:
true //开启分页
, edit:
true , cols: [[
//表头
{ checkbox:
true },
// { checkbox: true,type: 'checkbox', width: 100, title: '选择' },
// { type: 'checkbox', width: 100, title: '选择' },
// { field: 'ID', title: 'ID', width: 80, sort: true, fixed: 'left' }
, { field: 'yuefen', title:'月份', width: 80 }
, { field: "state", title: "状态", width: 80, sort:
true }
, { field: "state2", title: "状态2", width: 80, event: 'setSign', style: 'cursor: pointer;' }
, { field: "empname", title: "操作员" , width: 177 ,edit:
true }
, { field: "createdate", title: "时间", width: 180, sort:
true }
, { fixed: 'right', width: 250, align: 'center', toolbar: '#barDemo' }
//这里的toolbar值是模板元素的选择器
]]
//*********************************
, page: { theme: '#409eff', prev: '上一页', groups: 8, next: '下一页', layout: ['count', 'prev', 'page', 'next'] }
//********************************
});
//*******************************
//监听行单击事件
table.on('row(test)',
function (obj) {
// console.log(obj.tr) //得到当前行元素对象
// console.log(obj.data) //得到当前行数据
// alert(obj.data.yuefen);
//obj.del(); //删除当前行
//obj.update(fields) //修改当前行数据
});
//监听行双击事件
table.on('rowDouble(test)',
function (obj) {
//obj 同上
});
//监听复选框选择
table.on('checkbox(test)',
function (obj) {
alert(obj.checked);
alert(obj.data.ID);
console.log(obj.checked);
//当前是否选中状态
// console.log(obj.data); //选中行的相关数据
console.log(obj.type);
//如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
//编辑
table.on('edit(test)',
function (obj) {
//注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
alert("1122" + obj.value);
console.log(obj.value);
//得到修改后的值
console.log(obj.field);
//当前编辑的字段名
console.log(obj.data);
//所在行的所有相关数据
});
//监听单元格事件
table.on('tool(test)',
function (obj) {
var data = obj.data;
if (obj.event === 'setSign') {
alert("eeeeeee：" );
//同步更新表格和缓存对应的值
obj.update({
state2: '7777777'
});
/*
layer.prompt({
formType: 2
, title: '修改 ID 为 [' + data.id + '] 的用户签名'
, value: data.sign
}, function (value, index) {
layer.close(index);
//这里一般是发送修改的Ajax请求
//同步更新表格和缓存对应的值
obj.update({
sign: value
});
});
*/ }
});
//监听工具条
/*
table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if (layEvent === 'detail') { //查看
//do somehing
} else if (layEvent === 'del') { //删除
layer.confirm('真的删除行么', function (index) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'edit') { //编辑
//do something
//同步更新缓存对应的值
obj.update({
state2: '123'
, empname: 'xxx'
});
} else if (layEvent === 'LAYTABLE_TIPS') {
layer.alert('Hi，头部工具栏扩展的右侧图标。');
}
});
*/ });
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
<!-- 这里同样支持 laytpl 语法，如： -->
{{#
if(d.auth > 2){ }}
<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
{{# } }}
</script>