标签:数据 pass field lte 分页 url lin 使用 pre
不多bb,直接上代码
html的代码:
<link rel="stylesheet" href="../../static/layui/css/layui.css"> <script src="../../static/layui/layui.js"></script> <script src="../../static/js/jquery.js"></script> <table class="layui-hide" id="test" lay-filter="table"></table>
<script type="text/html" id="barDemo">
<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>
<!--<a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="edit"></a>-->
<!--<a class="layui-icon" style="font-size: 25px; color: #1AA094;" lay-event="del"></a>-->
</script>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":"黄楠楠","password":"111","nickName":"楠佬","phone":"18162775609"},
    {"id":2,"userName":"齐浩宇","password":"111","nickName":"齐佬","phone":"18162775609"},
    {"id":3,"userName":"祁剑雄","password":"111","nickName":"熊佬","phone":"18162775609"}
    ]
}
最后的出来的效果:

今天就先到这里把,等这个星期双休的时候,再研究下。
标签:数据 pass field lte 分页 url lin 使用 pre
原文地址:https://www.cnblogs.com/fuckingPangzi/p/9912369.html