layui的table使用

不多bb，直接上代码html的代码：

js的代码：

layui.use(['form','layer','table','upload'],function () { var table = layui.table, layer = layui.layer; table.render({ elem:\"#test\

url:\"../json/data.json\ cellMinWidth:80, cols:[[

{type:'numbers'}, {field:'id',title:'id'},

{field:'userName',title:'⽤户名'}, {field:'password',title:'密码'}, {field:'nickName',title:'昵称'}, {field:'phone',title:'电话号码'},

{fixed: 'right',title: '操作', width:180, align:'center', toolbar: '#barDemo'} //绑定tpl表达式 ]],

page:true,//开启分页

id:'testReload' //这个id挺重要的 你对table做操作时候需要使⽤到 ⽐如reload的时候 });

table.on('tool(table)',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 === 'del'){

layer.confirm('真的删除⾏么', function(index){

obj.del(); //删除对应⾏（tr）的DOM结构，并更新缓存 layer.close(index);

//向服务端发送删除指令 });

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

layer.msg(\"我要编辑你了，怕不怕啊\"); } });});

还有json⽂件：

{

\"code\":0,

\"msg\":\"崩坏三好好玩\ \"count\":3, \"data\":[

{\"id\":1,\"userName\":\"黄楠楠\楠佬\ {\"id\":2,\"userName\":\"齐浩宇\齐佬\ {\"id\":3,\"userName\":\"祁剑雄\熊佬\ ]}

最后的出来的效果：

今天就先到这⾥把，等这个星期双休的时候，再研究下。

layui的静态表格