layui数据表格使用（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）

var table = layui.table

            ,form = layui.form;

    layui.use('table', function () {  // 引入 table模块

        table.render({

            id:"dataTable",//

            elem: '#layui_table_id',//指定表格元素

            url: '/menu/menuList.ajax',  //请求路径

            cellMinWidth: 20 //全局定义常规单元格的最小宽度，layui 2.2.1 新增

            ,skin: 'line ' //表格风格 line （行边框风格）row （列边框风格）nob （无边框风格）

          　//,even: true    //隔行换色

            ,page: true  //开启分页

            ,limits: [10,20,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。

            ,limit: 10 //每页默认显示的数量

            ,method:'post'  //提交方式

,done: function(res, curr, count) { //表格数据加载完后的事件

    //调用示例

    layer.photos({//点击图片弹出

        photos: '.layer-photos-demo'

        ,anim: 1 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）

    });

    //如果是异步请求数据方式，res即为你接口返回的信息。

    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度

    console.log(res);

    //得到当前页码

    console.log(curr);

    //得到数据总量

    console.log(count);

}

  　　,cols: [[ {type:'checkbox'}, //开启多选框  { field: 'menuId', //json对应的key title: 'ID', //列名 sort: true // 默认为 false,true为开启排序  },{ fixed: 'right', title: '操作', width: 215, align:'center', toolbar: '#barDemo' //绑定按钮组 } ]] }); });

//监听工具条

table.on('tool(dataTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"

    var data = obj.data //获得当前行数据

            ,layEvent = obj.event; //获得 lay-event 对应的值

    if(layEvent === 'detail'){

　　　　 layui.alert(JSON.stringifr(data)) ; //将编辑的行信息转为json字符串

        layer.msg(data.attrId);

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

        layer.msg('删除'+data.menuId);

        console.log(table)

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

    });

    }

});

<script type="text/html" id="barDemo">  // id和toolbar 属性绑定

     <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>

     <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>

</script>

<!--  是否显示 -->

<script type="text/html" id="isShow">  // 请注意 id之间的关联

    {{#  if(d.menuDisplay === 'Y'){ }}

    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" checked>

    {{#  } else { }}

    <input type="checkbox" name="menuDisplay" value="{{d.menuId}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="isShow" >

    {{#  } }}

</script>

{   //在表格对象cols属性中添加

    field: 'menuDisplay',  /

    title: '是否显示',

    templet: '#isShow', //模板关联以上定义的

    unresize: true,

    filter: "isShow",

    sort: false

}

{

    field: 'menuDisplay',

    title: '是否显示',

    unresize: true,

    filter: "isShow",

    sort: false,

    templet: function (d) {

        if (d.menuDisplay == ‘Y’) {

            return` <input type = "checkbox"

            name = "menuDisplay"

            value = "`+d.menuId+`"

            lay - skin = "switch"

            lay - text = "显示|隐藏"

            lay - filter = "isShow" > `;

        } else {

            return` <input type = "checkbox"

            name = "menuDisplay"

            value = "`+d.menuId+`"

            lay - skin = "switch"

            lay - text = "显示|隐藏"

            lay - filter = "isShow"

            checked > `;

        }

    }

}

　　　　　　　　{

                    field: 'img',

                    title: '图片',

                    unresize: true,

                    sort: false,

                    //style:'height:100px;',

                    templet:function (d) {

                        return `<div class="layer-photos-demo" onclick="img_click()" style="cursor:pointer;">

                                      <img layer-pid="图片id，可以不写"  layer-src="/images/bug-success-bg.jpg" src="/images/bug-success-bg.jpg" alt="图片名">

                                    </div>`;

                    }

                }