【layui】配置调用多个扩展组件方法

MoFe1

已于 2022-04-27 14:13:40 修改

阅读量731

点赞数

CC 4.0 BY-SA版权

分类专栏： layui 文章标签： javascript 前端 html

于 2022-03-10 16:57:49 首次发布

本文链接：https://blog.youkuaiyun.com/MoFe1/article/details/123405865

layui 专栏收录该内容

6 篇文章

订阅专栏

该博客内容展示了如何使用layui框架来实现部门管理的页面，包括表格渲染、数据加载、添加、编辑和删除操作。主要涉及layui的form、table、treeTable组件，以及通过AJAX进行后台交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui.config({
            //base: '你存放新模块的目录，注意，不是 layui 的模块目录'
            base: '/res/js/modules/'
        }).extend({
            //组件名1示例：treeSelect: 'treeSelect/treeSelect',
            组件名1: '相对于base路径的路径，路径结尾到文件名',
            //组件名2示例：treeTable: 'treeTable/treeTable',
            组件名2: '相对于base路径的路径，路径结尾到文件名'
        }).use(['form', 'table', '组件名1','组件名2', 'form'], function () {
        //创建组件变量并配置组件
        var 组件名1 = layui.组件名1;
        //配置名为组件名1的组件，以treeTable为例
            var $ = layui.jquery;
            var form = layui.form;
            var table = layui.table;
            var treetable = layui.treetable;
            var renderTable = function () {
                layer.load(2);
                treetable.render({
                    toolbar: '#toolbarDemo',
                    treeColIndex: 1,
                    treeSpid: "0",
                    treeIdName: 'id',
                    treePidName: 'parentId',
                    treeDefaultClose: false,
                    treeLinkage: true,
                    elem: '#test',
                    url: '/Home/getDepartList',
                    page: false,
                    //treeDefaultClose: false,
                    cols: [[
                        { type: 'radio' },
                        { field: 'departmentName', title: '部门名称' },
                        { field: 'parentName', title: '上级部门' },
                        { field: 'isEnable', title: '是否启用' },
                        { field: 'remark', title: '部门描述'}
                        //{ field: 'remark', title: '部门描述', sort: true, templet: '#sourceTpl' },
                        //{ templet: '#oper-col', title: '操作', toolbar: '#barDemo' }
                    ]],
                    done: function () {
                        layer.closeAll('loading');
                    }
                });
                //头工具栏事件
                table.on('toolbar(test)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'addItem'://新增
                            layer.open({
                                title: '添加部门',
                                area: ['600px', '450px'],
                                type: 2,
                                content: '/Home/addDepartment'
                            });
                            break;
                        case 'update'://修改
                            var data = checkStatus.data;
                            layer.open({
                                title: '编辑部门',
                                area: ['600px', '450px'],
                                type: 2,
                                content: '/Home/addDepartment?id='+ data[0].id
                            });
                            break;
                        case 'delete'://删除
                            var data = checkStatus.data;
                            if (data == 1) {
                                return false;
                            }
                            $.ajax({
                                url: '/Home/DelBasicInfoByID?id=' + data[0].id,
                                type: 'get',
                                beforeSend: function (xhr) {
                                    //xhr.setRequestHeader("BaseAuth", $.cookie("getToken"));
                                },
                                success: function (res) {
                                    if (res) {
                                        layui.use('layer', function () {
                                            var layer = layui.layer;
                                            layer.msg('删除成功', {
                                                anim: 0,
                                                time: 2000
                                            }, function () {
                                                window.location.reload();
                                            });
                                        });
                                    } else {
                                        layui.use('layer', function () {
                                            var layer = layui.layer;
                                            layer.msg('删除失败', {
                                                anim: 0,
                                                time: 2000
                                            }, function () {
                                            });
                                        });
                                    }
                                }
                            });
                            break;
                    };
                });
            };
});