layui数据表格使用笔记

• 数据渲染：

layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#data-table'
            , url: "{:url('index/table_data/zimeiti_price_lst')}"
            , page: true
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度
            , cols: [[
                {field: 'id', title: 'ID', sort: true, fixed: 'left', hide: true}
                , {field: 'name', title: '名称'}
                , {field: 'platform', title: '平台'}
                //单元格里显示图片
                , {
                    field: 'yishou_path', title: '一手认证', event: 'checkYishou', templet: function (d) {
                        if (d.yishou_path) {
                            return '<img src="/static/index/img/zmt_renzheng.jpg" alt="一手认证">';
                        }
                    }
                }
                , {field: 'day_pianshu', title: '可发篇数'}
                , {field: 'price', title: '价格', sort: true}
                , {field: 'category', title: '行业分类'}
                , {field: 'fans', title: '粉丝数'}
                , {field: 'hits', title: '阅读数'}
                , {field: 'marks', title: '备注'}
            ]]
        });
}

• 数据筛选，表格重载

//点击搜索框按钮时发送表单数据进行表格重载
            $('#submit-btn').on('click', function () {
                var keyword = $("#zimeiti_name").val();
                table.reload('data-table', {
                    method: 'post',
                    where: {
                        'keyword': keyword,
                    },
                    page: {
                        curr: 1
                    }
                });
        });

• 模板引擎+多重条件判断

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  if(d.shenhe == 1 ){ }}

    {{#  if(d.is_stop == 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="start">开启</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="stop">暂停</a>
    {{#  } }}

    {{#  } }}
</script>

• 监听行工具

table.on('tool(dataTable)', function (obj) {
                var data = obj.data; //获得当前行数据
                var zimeiti_id = data.id;
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

                if (layEvent === 'detail') { //查看

                    window.location.href = 'detail/zmt_id/' + zimeiti_id;
                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "{:url('del')}",
                            type: 'post',
                            data: {
                                zmt_id: zimeiti_id
                            }
                            , success: function (result) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                }, function () {
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                });
                            }
                        });
                    });
                } else if (layEvent === 'edit') { //编辑
                    window.location.href = 'edit/zmt_id/' + zimeiti_id;

                } else if (layEvent === 'stop') {
                    layer.confirm('确定要暂停接单吗？', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            url: "{:url('stop')}"
                            , method: "post"
                            , data: {
                                zmt_id: zimeiti_id
                            }
                            , success: function (result) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                }, function () {
                                    window.location = result.url;
                                });
                            }
                        });

                        layer.close(index);
                    });
                } else if (layEvent === 'start') {
                    layer.confirm('确定要开始接单吗？', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            url: "{:url('start')}"
                            , method: "post"
                            , data: {
                                zmt_id: zimeiti_id
                            }
                            , success: function (result) {
                                layer.msg(result.msg, {
                                    icon: 1,
                                }, function () {
                                    window.location = result.url;
                                });
                            }
                        });

                        layer.close(index);
                    });
                }
            });