layui的table简单使用和避坑

在分享之前的第一建议是看官网文档，这个也是官网建议的，遇到layui的坑，建议看官网文档。废话不多说，开始layui的table用法。

1.table的数据结构--数据接口必须是这种格式，官网也是有说明的，否则就呵呵。所以提前要和后台说好哦。（code,msg,count,data定死）

    {
    "code": 0
    ,"msg": ""
    ,"count": "100"
    ,"data": [{
    "orderid": 111
    ,"title": "移动"
    ,"attr": "公告"
    ,"progress": "25%"
    ,"submit": "贤心"}]
}

2.前端html结构

<table id='testTable'></table>//后面需要取到这个id

3.我们前端需要写的js，layui也是有定好的方法

layui.define(['table', 'form', 'element'], function (exports) {
    var $ = layui.$
        , admin = layui.admin
        , view = layui.view
        , table = layui.table
        , form = layui.form
        , element = layui.element;
    var tableIns = table.render({
        elem: '#testTable' //我们需要渲染table
        , method: "POST"
        , url: '/Admin/NewCompany/theListData' //模拟接口
        , cols: [[
            { type: 'checkbox', width: 30, align: 'center' },
            { field: 'co_id', width: 60, title: '机构ID', align: 'center'} , 
            { title: '操作', width: 80, align: 'center', toolbar: '#table-system-order' }
        ]]
        , page: true
        , limit: 10
        , limits: [10, 15, 20, 25, 30]
        , done: function (curr, limit) {
            //console.log(this.page.curr, this.page.limit);
        }, text: {
            none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
        }
    });

3.1 解释上一段代码的用法：

    elem：  这里是我们前端定好的table的id，直接写上就行
    method：请求方式
    url：   接口的地址
    cols ： 多少列 
    type：  有多种选择，type：number ，也可以，具体可以看官网，
            checkbox 是多选框，layui 也是有方法可以监听的，
            table.on('checkbox(newCompanyTable)', function (obj) { console.log(obj)}) 可以打印出来就知道效果
    field： 是根据接口的data的数据来的，field 等于data的属性名就可以取到对应的属性值了，
    title： 就是表格的标题了
    align： 对齐方式
    toolbar：是可以在HTML里面写模板，用script包裹的一个代码片段

<script type="text/html" id="buttonTpl">//这里的ID在上面表格上有取到
   {{# if(d.is_distribute == 1){ }}
   //已分配
   {{# } else if(d.is_distribute == 0){ }}
   //未分配
   {{# } else{ }}
   //未分配
   {{# } }}
</script>

这个的d是layui定死的，后面是data里面的属性名，根据后台的数据来判断。这个是简单的展示，layui的模板用法还有很多，可以多多看官网
page：是否开启分页
text：如果数据请求失败，显示的给页面

*小的tips：给后台传递分页参数的时候，分页的参数名也是layui定死的page 和 limit。所以需要和后台说好

4.table渲染出来之后的监听

4.1监听搜索：

搜索的HTML代码：

    <button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="searchBtn">搜索</button>

搜索的js代码：

form.on('submit(searchBtn)', function (data) {
    var formData = data.field;
    formData.is_search = 1;
    tableIns.reload({
        where: formData
    })；
    return false;
});

注意：lay-submit lay-filter="searchBtn" 这里的这一段代码不要忘记了

4.2 监听表格当中按钮的操作：

html代码：

<button lay-event="fenpei" class="layui-btn">分配</button>
//重点：lay-event="fenpei" 后面监听这个

js代码：

table.on('tool(testTable)', function (obj) {
    var data = obj.data; //获得当前行数据
    if (layEvent === 'fenpei') {
        //点击分配按钮之后的操作
    }
})

5.一个小插曲，就是layui的弹框里面的下拉，碰到的坑。这个是百度很久才知道的，其实官网上也有说明，但是如果没有阅读很仔细，很难看到。就是如论我们的change 事件，还是layui官网推荐监听下拉的方法，都是没有办法监听到的。

js代码：

layer.open({
    content:$("#box")       //这里一定要写取这个元素，而不是$("#box").html
    , btn: ['确定', '取消']
    type:1,                 //规避$("#box")这么写之后弹框会出现横向的滚动条
    , shade: 0.5            //显示遮罩的透明度
    , yes: function () {
    }
})

总结：layui是我自己使用，也是我很认真的总结。大家看了简单的使用方法之后建议用直接先看文档，是看文档的建议是按需取。