layui生成表格

最新推荐文章于 2024-09-06 09:05:47 发布

码农本农。

最新推荐文章于 2024-09-06 09:05:47 发布

阅读量340

点赞数

分类专栏： layui 前端

本文链接：https://blog.csdn.net/qq_36441163/article/details/108703724

版权

前端同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

layui

21 篇文章 0 订阅

订阅专栏

<script type="text/html" id="xu_hao">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<script type="text/html" id="cao_zuo">
    <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>
    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>

    var tableYk = layui.table;
    var tableCol=[[
         {templet: '#xu_hao', title: '序号', align: 'center', hide: true}
        , {field: '', title: '', align: 'center', hide: false}
        , {field: '', title: '', align: 'center', hide: false}
        , {field: '', title: '', align: 'center', hide: false}
        , {field: '', title: '', align: 'center', hide: false}
        , {title: '操作', align: 'center', toolbar: '#cao_zuo'}
    ]];
//----------------------------------------------------------------------------------------------------------------------

    function generateTableData(url,where,col) {
        tableYk.render({
            elem: '#tableData'
            , height: 'full-180'
            , cellMinWidth: 80
            , url: ctx + '/'+url //数据接口
            , where: where
            , page: true //开启分页
            , cols: col
        });
    }
//----------------------------------------------------------------------------------------------------------------------
        generateTableData("findDepartmentsByDeptName",{'deptName': $('#deptName').val()},tableCol);

    //监听工具条；表名：table1
    tableYk.on('tool(table1)', function (obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
            layerYk.msg('ID：' + data.deptId + ' 的查看操作');
        } else if (obj.event === 'del') {
            layerYk.confirm('真的删除行么', function (index) {
                obj.del();//前端假删除
                layerYk.close(index);//关闭确认框
            });
        } else if (obj.event === 'edit') {
            layerYk.msg('编辑行：<br>'+ JSON.stringify(data));   
        }
    });