yijia-webman/app/view/book/readingBook.html

{layout name="layout" /}

<div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-row">
        <div class="layui-btn-container layui-col-md2">
            <span>{$reading.name}</span>
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        </div>
    </div>
</script>
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="start">开始</a>
        <a class="layui-btn layui-btn-xs" lay-event="end">结束</a>
    </div>
</script>
<!--script src="/layui/soulTable/soulTable.slim.js"></script-->
<script>
layui.config({
    base: '/layui/',   // 第三方模块所在目录
    version: 'v1.9.0' // 插件版本号
}).extend({
    soulTable: 'soulTable/soulTable.slim'
});

layui.use(['table', 'dropdown', 'soulTable'], function(){
    var table = layui.table;
    var dropdown = layui.dropdown;
    var soulTable = layui.soulTable;
    var readingID = "{$reading.id}";

    // 创建渲染实例
    table.render({
        elem: '#test',
        url: '/book/apiGetReadingBookList?id=' + readingID, // 此处为静态模拟数据，实际使用时需换成真实接口
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter'],
        height: 'full-135', // 最大高度减去其他容器已占有的高度差
        even: true,
        css: [ // 重设当前表格样式
            '.layui-table-tool-temp{padding-right: 145px;}'
        ].join(''),
        cellMinWidth: 80,
        //totalRow: true, // 开启合计行
        //page: true,
        page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
            //curr: 5, //设定初始在第 5 页
            limit: 50,
            //groups: 1, //只显示 1 个连续页码
            //first: false, //不显示首页
            //last: false //不显示尾页
        },
        // 将原始数据解析成 table 组件所规定的数据格式
        parseData: function(res){
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.bookList.length, //解析数据长度
                "data": res.bookList //解析数据列表
            };
        },
        cols: [[
            {field: 'id', fixed: 'left', width:80, title: 'ID'},
            {field: 'book_name', width:300, title: '书名'},
            {field: 'author', width:180, title: '作者'},
            {field: 'category_name', width:100, title: '分类'},
            {field: 'statusStr', width:100, title: '状态'},
            {field: 'start', width:120, title: '开始'},
            {field: 'end', width:120, title: '结束'},
            {field: 'remark', title: '备注'},
            {fixed: 'right', title:'操作', minWidth: 60, templet: '#toolDemo'}
        ]],
        rowDrag:{done:function(obj){
            //拖动排序
            var num = obj.newIndex - obj.oldIndex;
            $.post('/book/apiSortReadingBook', {id: obj.row.id, num: num}, function(data){
                alert(data.msg);
            });
        }},
        done: function() {
            // 在 done 中开启
            soulTable.render(this)
        }
    });

    // 工具栏事件
    table.on('toolbar(test)', function(obj){
        var id = obj.config.id;
        var checkStatus = table.checkStatus(id);
        var othis = lay(this);

        switch(obj.event){
            case 'add':
                layerAlert('get', '添加', '/book/addReadingBook?reading_id=' + readingID);
                break;
        };
    });

    // 触发单元格工具事件
    table.on('tool(test)', function(obj){ // 双击 toolDouble
        var data = obj.data; // 获得当前行数据
        // console.log(obj)
        if(obj.event === 'edit'){
            layerAlert('get', '编辑', '/book/editReadingBook?id=' + data.id);
        } else if(obj.event === 'del'){   //删除
            $.get('/book/apiDelReadingBook', {id:data.id},function(data){
                layui.layer.msg(data.msg);
            });
        } else if(obj.event === 'start'){ //开始
            $.post('/book/apiStartReadingBook', {id: data.id}, function(data){
                layui.layer.msg(data.msg);
            });
        } else if(obj.event === 'end'){ //结束
            $.post('/book/apiEndReadingBook', {id: data.id}, function(data){
                layui.layer.msg(data.msg);
            });
        }
    });
});
</script>