layui 数据表格，简单使用

layui数据表格简单使用：

其中关于后台的数据操作都忽略了：其实基本构好前端，提供接口了，后台就一步一步实现即可：我的一般是从controller->service接口->service实现->mapper接口->mapper.xml数据库操作（mybatis的话）
1.html页面，需要标明table的ID
table的：

<table id="userList" lay-filter="userList"></table>

工具列的：

<script type="text/html" id="userBar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="detail">查看</button>
            <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
            <button class="layui-btn layui-btn-danger  layui-btn-sm" lay-event="changeStu">删除</button>
        </div>
    </script>

其中lay-event 是用来监听事件的，同table一样，绑定是靠#id
2.js则是控制数据和列内容
要关联到table 其中首先要layui.use([],function(){
let xx=layui.xx;
表格渲染则是：table.render({
其中就是各种属性
elem：“#userList” 必填的关联html中的table 的 #id
id：则是用来多次渲染，所定位的table
,url: ‘/meiman/admin/api/memberList’ //数据接口，相应后台组装返回的数据（但是格式可能会不是json，就需要解析parseData:function（））
where：可以做动态筛选数据的条件
page：true开启分页
text：数据加载失败的显示
cols[[//等等常用属性：注意：这里必须是 [[{},{}…]] 类型的格式
{filed：返回数据字段名，title：列头，width，sort，fixed，aligin，toolbar："#userBar"},
{…}
]]
//如果你想重新规定返回的数据格式，那么可以借助 response 参数，如:
,response: {
statusName: ‘status’ //规定数据状态的字段名称，默认：code
,statusCode: 200 //规定成功的状态码，默认：0
,msgName: ‘hint’ //规定状态信息的字段名称，默认：msg
,countName: ‘total’ //规定数据总数的字段名称，默认：count
,dataName: ‘rows’ //规定数据列表的字段名称，默认：data
}
,parseData: function(res){ //res 后台组装原始返回的数据
return {
“code”: res.status, //解析接口状态
“msg”: res.message, //解析提示文本
“count”: res.total, //解析数据长度
“data”: res.data.item //解析数据列表，后台返回的item应该解析出来是 [{},{}…] 这样的数组类型
},
done: function(){//可用来控制显示文本等操作参数可传res（接口返回的信息）, curr（得到当前页码）, 只有一 个done：function,再函数里面分别做处理就ok，多个done，就只有最后一个生效。
count(总数据条数)
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((this).text()‘1’){
KaTeX parse error: Expected 'EOF', got '}' at position 43: … }̲else if((this).text()‘2’){
$(this).text(“冻结”)
}
})
}
各种详细属性可见：https://www.layui.com/doc/modules/table.html#use

$(function () {
let uname="";
layui.use(['form','layer','table','jquery'],function () {
    let form=layui.form,
        layer=layui.layer,
        table=layui.table,
        $ = layui.jquery;
    table.render({
        elem:'#userList'
        ,id:'userList'
        ,url: '/meiman/admin/api/memberList' //数据接口
        ,where:{'uname':uname}
        ,page: true //开启分页
        ,text:"数据加载失败"
        ,cols: [[ //表头
            {checkbox:true,width:'50',fixed: 'left'}//单选框
        ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
        ,{field: 'uname', title: '用户名', width:200}
        ,{field: 'role', title: '角色', width:200}
        ,{field: 'stu', title: '状态', width:200}
        ,{field: 'toolBar', title: '操作', align:'center',width:200,toolbar:'#userBar'}//工具列
    ]]
        ,response:{statusCode:"1000"}
        ,parseData:function (res) {
            return{
                "code":res.code,
                "msg":res.msg,
                "count":res.data.count,
                "data":res.data.list
            };
        },
        done: function(){//只有一个done：function,再函数里面分别做处理就ok，多个done，就只有最后一个生效。
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                $("[data-field='stu']").children().each(function () {
                    if($(this).text()=='1'){
                        $(this).text("启用")
                    }else if($(this).text()=='2'){
                        $(this).text("冻结")
                    }
                })
            }
});
})
});

3.样式基本ok，可以添加一些监听事件了
当然代码不全，这里只写的table主要部分，像table外部的搜索框，批量删除，添加就正常事件监听就行
这里主要是针对，1.table的渲染（利用了搜索框的from提交）2.和操作列工具栏的事件监听

4.搜索监听：其中html中的 name=”uname“属性和js里的 uname =data.field.uname 相对应
lay-submit lay-filter=“search” 和js的submit(search) 对应

html.

<form class="layui-form xbs" action="" >
        <div class="layui-form-pane">
            <div class="layui-form-item" style="display: inline-block;">
                <div class="layui-input-inline">
                    <input type="text" name="uname"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn"   lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </div>
    </form>

js.

  //搜索
    form.on('submit(search)',function (data) {
        uname =data.field.uname;
        table.reload('userList',{
            where: {'uname':uname}
        });
        return false;
    });

5.批量删除。
html。

<button class="layui-btn layui-btn-danger delAll"><i class="layui-icon">&#xe640;</i>批量删除</button>

js。主要是监听table中的checkbox

//批量删除
$(".delAll").click(function () {
    let checkStatus = table.checkStatus('userList'),//监听复选框的选中事件，关联的是js中渲染table的id
    data = checkStatus.data,
    ids = "";
    if (data.length>0){
        for(let i=0;i<data.length;i++){
            ids+=data[i].id+",";
        }
        ids=ids.substring(0,ids.length-1);
        layer.confirm('确定删除选中用户？',{icon:3,title:'提示信息'},function () {
            $.get('/meiman/admin/api/delAll',{ids:ids},function (res) {
                layer.msg("删除了："+ids);
                if(res.code=1000){
                    layer.msg('删除成功！',{icon:6,time:1000},function () {
                        location.href='/meiman/admin/member';
                    })
                }
                else {
                    layer.msg('删除失败！',{icon:5,time:1000},function () {
                        location.href='/meiman/admin/member';
                    })
                }
            })
        })
    }
});

6.工具列的监听及操作
js

 //工具列操作
        table.on('tool(userList)',function (obj) {
            let data = obj.data;
            switch(obj.event){
                case 'detail':
                    layer.msg('查看');
                    break;
                case 'edit':
                    window.location.href="memberUpdate?id="+data.id;//跳某个页面，并且传递当前行的id，供后台查询
                    break;
                case 'changeStu':
                    layer.confirm('确定修改'+data.uname+"的状态？",{icon:3,title:"提示信息"},function (index) {
                        $.post("/meiman/admin/api/ChangeStuById",{stu:data.stu,id:data.id},function (res) {
                            if(res.code ==='1000' ){
                                top.layer.msg("用户状态更改成功！");
                                window.location.href="/meiman/admin/member";
                                layer.close(index);
                            }
                            else {top.layer.msg("用户状态设置失败！");}
                        })
                    });
                    break;
            }
        });

7.好吧，layui表格暂时使用到这。。。一些基本监听能够处理，数据/参数能够获取/传递/显示就暂时ok了