layui框架中关于table方法级渲染和自动化渲染之间的区别简单介绍

方法级渲染：

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

<script>
layui.use('table', function () {
var table = layui.table;

//监听表格复选框选择
table.on('checkbox(user)', function (obj) {     //注意点1   user是 lay-filter="user"的值。监听工具条也用到这个值，不再多说。
console.log(obj)
});

table.render({
elem: '#LAY_table_user'
, url: '@Url.Action("IndexData1", "UserInfo")'
, cols: [[
{checkbox: true, fixed: true}
, { field: 'uID', title: 'uID', width: 100, sort: true, fixed: true }
, { field: 'uName', title: '姓名', width: 110 }
, { field: 'uSex', title: '性别', width: 110, sort: true }
, { field: 'uAge', title: '年龄', width: 110 }
, { field: 'uAdress', title: '地址', width: 150 }
, { field: 'uPhone', title: '电话', sort: true, width: 133 }
, { fixed: 'right', title: '操作', width: 230, align: 'center', toolbar: '#barDemo' }
]]
, id: 'testReload'
, page: true
, height: 'auto'
,width:1000
});

<div class="demoTable">
<button class="layui-btn layui-btn-sm" data-type="AddUserInfo"><i class="layui-icon" style="font-size: 25px; color: #FF5722;"></i>添加</button>
<button class="layui-btn layui-btn-sm" data-type="getCheckLength"><i class="layui-icon" style="font-size: 25px; color: #FF5722;"></i>批量</button>
&nbsp;输入姓名(<label style="font-size:1px;color:red;">*可模糊</label>)
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>

这个div是里面是按钮，注意有一个data-type="AddUserInfo" 属性，在

var $ = layui.$, active = {
reload: function () {
var demoReload = $('#demoReload');  //demoReload是文本框的id值

table.reload('testReload', {     //注意点3:testReload 是     比如做批量删除你要获得所有复选框选中项对应的id值是就用这个id，这和自动渲染不太一样。(本人就在这花了好长时间)

page: {
curr: 1 //重新从第 1 页开始
}
, where: {
key: demoReload.val()     //这个key是文本框输入的值
}
});
}
, AddUserInfo: function () { //新增用户    这里就是上面按钮的data-type="AddUserInfo" 属性。这和自动渲染一样，下面自动渲染就不多说，注意对应就行。
layer.open({
type: 2,
skin: 'layui-layer-lan',
area: ['300px', '360px'],
title: "新增信息",
content: "@Url.Action("AddUser", "UserInfo")"
})
}

};

$('.demoTable .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});

比如做批量删除你要获得所有复选框选中项对应的id值:

var uIDs = "";
var checkStatus = table.checkStatus('testReload')    //testReload：刚上面解释过了
, data = checkStatus.data;

自动化渲染:

<table class="layui-table" lay-data="{width: 918, height:'auto', url:'@Url.Action("IndexData", "UserInfo")', page:true,id:'idTest'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
<th lay-data="{field:'uID', width:100, sort: true, fixed: true}">ID</th>
<th lay-data="{field:'uName', width:100}">姓名</th>
<th lay-data="{field:'uSex', width:100, sort: true}">性别</th>
<th lay-data="{field:'uAge', width:100}">年龄</th>
<th lay-data="{field:'uAdress', width:160}">地址</th>
<th lay-data="{field:'uPhone', width:100}">电话</th>
<th lay-data="{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'}">操作</th>
</tr>
</thead>
</table>

layui.use('table', function () {
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(demo)', function (obj) {      //注意点2   demo也是 lay-filter="user"的值。监听工具条也用到这个值，不再多说。
console.log(obj)
});

比如做批量删除你要获得所有复选框选中项对应的id值:

var uIDs = "";
var checkStatus = table.checkStatus('idTest')    //idTest：就是<table class="layui-table" lay-data="{width: 918, height:'auto', url:'@Url.Action("IndexData", "UserInfo")', page:true,id:'idTest'}" lay-filter="demo">里面的id值
, data = checkStatus.data;

});

备注:本人只是将自动渲染和方法级渲染之间最容易搞混的地方做了简单介绍，其他的基本都一样，完全照着官网把代码考下来稍做修改就可以用。