2021-11-17 layui数据表格

主要使用layui的templet - 自定义列模板，添加跳转链接, templet: function (data) {return '<a style="cursor:pointer;color: deepskyblue;" onclick="Test.openTestDetails(\'' + data.id + '\',\'' + data.name + '\')">' + d

零碎記忆

579人浏览 · 2021-11-17 16:27:10

零碎記忆 · 2021-11-17 16:27:10 发布

1.数据表格基本（弹窗）

html

<div class="layui-body-header">
    <span class="layui-body-header-title">xxx管理</span>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form toolbar">
                        <div class="layui-form-item">
                            <!-- 通过name搜索 -->
                            <div class="layui-inline">
                                <input id="name" class="layui-input" type="text" placeholder="名称"/>
                            </div>
                            <!-- 搜索、添加、导出 按钮 -->
                            <div class="layui-inline">
                                <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                                <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
<!--                                <button id="btnExp" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>-->
                            </div>
                        </div>

                    </div>
                    <table class="layui-table" id="categoryTable" lay-filter="categoryTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 行内遍历，删除按钮 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<!-- ew-event="closeDialog"   添加、编辑页面的取消关闭弹窗属性 -->

layui.use(['table', 'admin', 'ax', 'func'], function () {
    var $ = layui.$;
    var table = layui.table;
    var $ax = layui.ax;
    var admin = layui.admin;
    var func = layui.func;

    /**
     * 药品分类管理
     */
    var Category = {
        tableId: "categoryTable",
        row: ''
    };

    /**
     * 初始化表格的列
     */
    Category.initColumn = function () {
        return [[
            {type: 'checkbox'},
            {field: 'id', hide: true, title: '主键id'},
            {field: 'code', hide: true, title: '编码'},
            {field: 'name', align: 'center', valign: 'middle', title: '名称'},
            {field: 'sort', align: 'center', valign: 'middle', title: '排序'},
            {field: 'createTime', align: 'center', valign: 'middle', title: '创建时间'},
            {field: 'createUser', hide: true, title: '创建人'},
            {field: 'updateTime', hide: true, title: '更新时间'},
            {field: 'updateUser', hide: true, title: '更新人'},
            {align: 'center', toolbar: '#tableBar', title: '操作'}
        ]];
    };

    /**
     * 点击查询按钮
     */
    Category.search = function () {
        var queryData = {};

        queryData['name'] = $("#name").val();

        table.reload(Category.tableId, {
            where: queryData, page: {curr: 1}
        });
    };

    /**
     * 跳转到添加页面
     */
    Category.openAddPage = function () {
        func.open({
            title: '添加药品分类',
            width: '600px',
            height: 600,
            content: Feng.ctxPath + '/category/add',
            tableId: Category.tableId,
        })
    };

    /**
    * 跳转到编辑页面
    *
    * @param data 点击按钮时候的行数据
    */
    Category.openEditPage = function (data) {
        func.open({
            title: '修改药品分类',
            width: '600px',
            height: 600,
            content: Feng.ctxPath + '/category/edit?id=' + data.id,
            tableId: Category.tableId,
        })
    };

    /**
     * 导出excel按钮
     */
    Category.exportExcel = function () {
        var checkRows = table.checkStatus(Category.tableId);
        if (checkRows.data.length === 0) {
            Feng.error("请选择要导出的数据");
        } else {
            table.exportFile(tableResult.config.id, checkRows.data, 'xls');
        }
    };

    /**
     * 点击删除
     *
     * @param data 点击按钮时候的行数据
     */
    Category.onDeleteItem = function (data) {
        var operation = function () {
            var ajax = new $ax(Feng.ctxPath + "/category/delete", function (data) {
                Feng.success("删除成功!");
                table.reload(Category.tableId);
            }, function (data) {
                Feng.error("删除失败!" + data.responseJSON.message + "!");
            });
            ajax.set("id", data.id);
            ajax.start();
        };
        Feng.confirm("是否删除?", operation);
    };

    // 渲染表格
    var tableResult = table.render({
        elem: '#' + Category.tableId,
        url: Feng.ctxPath + '/category/list',
        page: true,
        height: "full-158",
        cellMinWidth: 100,
        cols: Category.initColumn()
    });

    // 搜索按钮点击事件
    $('#btnSearch').click(function () {
        Category.search();
    });

    // 添加按钮点击事件
    $('#btnAdd').click(function () {

    Category.openAddPage();

    });

    // 导出excel
    $('#btnExp').click(function () {
        Category.exportExcel();
    });

    // 工具条点击事件
    table.on('tool(' + Category.tableId + ')', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;

        if (layEvent === 'edit') {
            Category.openEditPage(data);
        } else if (layEvent === 'delete') {
            Category.onDeleteItem(data);
        }
    });
});

2.数据表格中点击名称跳转到详情页

主要使用layui的 templet - 自定义列模板，添加跳转链接

    /**
     * 初始化表格的列
     */
    Test.initColumn = function () {
        return [[
            {type: 'checkbox'},
            {field: 'id', hide: true, title: '献言献策主键Id'},
            {field: 'name', align: 'center', valign: 'middle', title: '名称'
                , templet: function (data) {
                    return '<a style="cursor:pointer;color: deepskyblue;" onclick="Test.openTestDetails(\'' + data.id + '\',\'' + data.name + '\')">' + data.name + '</a>';
                }}
        ]];
    };

    /**
     * 详情跳转
     */
    Test.openTestDetails = function(id, name){
        func.open({
            title: '【'+name+'】详情',
            type: 2,
            content: Feng.ctxPath + '/test/details?id=' + id,
            tableId: Test.tableId,
            width : '1600px'
        })
    }

3.数据表格取消下拉选择分页

修改后

代码

    table.render({
        elem: '#' + tableId,
        data: data,
        page: true,
        limits: [10],
        cellMinWidth: 100,
        cols: [[
            {field: 'id', hide: true, title: '主键Id'},
            {field: 'name', align: 'center', valign: 'middle', title: '姓名'},
            {fixed: 'right',align: 'center', toolbar: '#tableBar', title: '操作'}
        ]]
        //隐藏下拉分页选择
        ,done: function(res, curr, count){
            $('.layui-laypage-limits').hide();
        }
    });

layui表格分页不显示下拉框，layui table分页隐藏下拉框方法https://www.qinziheng.com/details/8193/https://www.qinziheng.com/details/8193/

4.数据表格行单击事件

// 监听数据表格行单击事件
    table.on('row(categoryTable)', function(obj) {
        console.log(obj.data) //得到当前行数据
        Category.row = obj.data;//赋值
        //选中样式
        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
    });

5.tableBar中的内容添加判断

<script type="text/html" id="tableBar">
    {{#  if(d.status === '待提交'){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    {{# } else if(d.status === '待提交' || d.status === '已完成') { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    {{#  } }}
</script>