基于Layuimini的自己封装后台模板

时间：2024-01-27 18:58:50

基于Layui的后台模板,正在开发中

交流qq群：1062635741 邮箱：zhangqueque.foxmail.com
GitHub:https://github.com/ZhangQueque/quewaner.Layui.git

借鉴框架

Layuimini

在Layuimini中iframe 多tab版 基础上修改，保留其动态渲染菜单（写的非常帮帮，作为后端的我表示没看懂）、tab打开iframe窗口、更换主题等功能。

为啥子要写呢

  • 方便，为了兼职等，快速的搭建一套搭建后台管理系统。
  • 给我母校学弟学妹们用一用
  • ayui的组件进行封装，以C#见名识义的方法进行调用。
  • 主模板是Layui，但是并不局限于使用Layui的组件及样式，也可以使用BootStrape、Vue等。这都得利于Layuimini框架的iframe窗口，再窗口中打开的是一个新页面，所以不受Layui局限。

样例

正常的Layui表格渲染

table.render({
            elem: '#currentTableId',
            url: '../api/table.json',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'username', width: 80, title: '用户名'},
                {field: 'sex', width: 80, title: '性别', sort: true},
                {field: 'city', width: 80, title: '城市'},
                {field: 'sign', title: '签名', minWidth: 150},
                {field: 'experience', width: 80, title: '积分', sort: true},
                {field: 'score', width: 80, title: '评分', sort: true},
                {field: 'classify', width: 80, title: '职业'},
                {field: 'wealth', width: 135, title: '财富', sort: true},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

封装后

 /**
    * 菜单初始化
    * @param tableId  string   表格ID
    * @param url      string   数据接口
    * @param cols     [{}]     表头
    * @param page     bool     是否启动分页，默认true
    * @param limit    int      每页显示数量，默认10
    * @param skin     string   皮肤，默认line
    */
 LayuiHelper.TableRender('#currentTableId', '/api/table.json', [
            { type: "checkbox", width: 50 },
            { field: 'id', width: 80, title: 'ID', sort: true },
            { field: 'username', width: 80, title: '用户名' },
            { field: 'sex', width: 80, title: '性别', sort: true },
            { field: 'city', width: 80, title: '城市' },
            { field: 'sign', title: '签名', minWidth: 150 },
            { field: 'experience', width: 80, title: '积分', sort: true },
            { field: 'score', width: 80, title: '评分', sort: true },
            { field: 'classify', width: 80, title: '职业' },
            { field: 'wealth', width: 135, title: '财富', sort: true },
            { title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center" }
        ]);

相关文章