layui前端菜单构建-批量删除-弹框填写-树状菜单-树状下拉框选择treeSelect

最新推荐文章于 2024-05-06 08:25:56 发布
最新推荐文章于 2024-05-06 08:25:56 发布
阅读量1.2k 收藏 5
点赞数
分类专栏： layui 文章标签： html js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42477252/article/details/106447089
版权

树形表格treeTable实现了layui数据表格

TreeTable树状表

https://gitee.com/whvse/treetable-lay

https://gitee.com/whvse/treetable-lay/wikis/pages?sort_id=1986092&doc_id=142114

https://layuiextend.hsianglee.cn/eletree/

TreeSelect树状下拉

https://fly.layui.com/extend/treeSelect/

 

效果图

页面总体

<!DOCTYPE html >
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script th:src="@{/js/jquery-1.10.2.js}"></script>
        <script th:src="@{/layui/layui.all.js}"></script>
        <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
        <style>
            .demo-side {
                position: relative;
                transition: all .3s;
            }

            .demo-side.show {
                padding-left: 120px;
                position: relative;
            }

            .demo-side:before {
                content: "假设这是侧边栏, treeTable使用了与layui数据表格完全不同的列宽分配方式, 由浏览器来分配, 所以当容器宽度变化后会自动适应, 对单页面系统非常友好";
                position: absolute;
                left: 0;
                top: 50%;
                margin-top: -90px;
                width: 105px;
                visibility: hidden;
                line-height: 1.5;
            }

            .demo-side.show:before {
                visibility: visible;
            }
        </style>
    </head>
    <body>
        <div id="edit-main" style="display: none;" >
            <div class="my-form" id="edit-permission">
                <form class="layui-form" action="">
                    <input type="hidden"id="menuId1" name="menuId1" required >
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单类型</label>
                        <div class="layui-input-block">
                            <input type="radio" id="menuTypeM1" name="menuType1" value="M" title="目录">
                            <input type="radio" id="menuTypeC1" name="menuType1" value="C" title="菜单">
                            <input type="radio" id="menuTypeF1" name="menuType1" value="F" title="按钮">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="menuName1" name="menuName1" required  lay-verify="required" placeholder="菜单名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请求地址url</label>
                        <div class="layui-input-inline">
                            <input type="text" id="url1" name="url1" required  lay-verify="required" placeholder="请求地址url" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限标识</label>
                        <div class="layui-input-inline">
                            <input type="text" id="perms1" name="perms1" required  lay-verify="required" placeholder="权限标识" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">显示排序</label>
                        <div class="layui-input-inline">
                            <input type="text" id ="orderNum1" name="orderNum1" required  lay-verify="required" placeholder="显示排序" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图标</label>
                        <div class="layui-input-inline">
                            <input type="text" id="icon1" name="icon1" required  lay-verify="required" placeholder="图标" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            <input type="radio" id="visible1" name="visible1" value="0" title="显示">
                            <input type="radio" id="visible2" name="visible1" value="1" title="隐藏">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-inline">
                            <input type="text" id="remark1" name="remark1" required  placeholder="备注" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemoEdit">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="add-main" style="display: none;" >
            <div class="my-form" id="permission">

                <form class="layui-form" action="">

                    <div class="layui-form-item">
                        <label class="layui-form-label">上级菜单ID</label>
                        <div class="layui-input-inline">
                            <input type="text"id="parentId" name="parentId" required readonly="readonly"   placeholder="菜单名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">上级菜单</label>
                        <div class="layui-input-inline">
                            <input type="text" id="parentName" name="parentName" required readonly="readonly"   placeholder="菜单名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择上级菜单</label>
                        <div class="layui-input-inline">
                            <input type="text"id="tree" lay-filter="tree" required   placeholder="菜单名" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单类型</label>
                        <div class="layui-input-block">
                            <input type="radio" id="menuTypeM" name="menuType" value="M" title="目录">
                            <input type="radio" id="menuTypeC" name="menuType" value="C" title="菜单">
                            <input type="radio" id="menuTypeF" name="menuType" value="F" title="按钮">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="menuName" name="menuName" required  lay-verify="required" placeholder="菜单名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请求地址url</label>
                        <div class="layui-input-inline">
                            <input type="text" id="url" name="url" required  lay-verify="required" placeholder="请求地址url" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限标识</label>
                        <div class="layui-input-inline">
                            <input type="text" id="perms" name="perms" required  lay-verify="required" placeholder="权限标识" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">显示排序</label>
                        <div class="layui-input-inline">
                            <input type="text" id ="orderNum" name="orderNum" required  lay-verify="required" placeholder="显示排序" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">图标</label>
                        <div class="layui-input-inline">
                            <input type="text" id="icon" name="icon" required value="#" lay-verify="required" placeholder="默认无为#" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否显示</label>
                        <div class="layui-input-block">
                            <input type="radio" name="visible" value="0" title="显示" checked>
                            <input type="radio" name="visible" value="1" title="隐藏">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-inline">
                            <input type="text" id="remark" name="remark" required  lay-verify="required" placeholder="备注" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="page-wrapper">

            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnReload" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe666;</i>重载
                </button>
                <button id="btnRefresh" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe669;</i>刷新
                </button>
                <!--        <button id="btnGetChecked" class="layui-btn layui-btn-sm layui-btn-primary">获取选中</button>
                        <button id="btnToggleSide" class="layui-btn layui-btn-sm layui-btn-primary">演示侧边栏</button>-->
            </div>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe668;</i>展开全部
                </button>
                <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe66b;</i>折叠全部
                </button>
                <!--        <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe625;</i>展开用户管理
                        </button>
                        <button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe623;</i>折叠用户管理
                        </button>-->
                <!--        <button id="btnChecked" class="layui-btn layui-btn-sm layui-btn-primary">
                            <i class="layui-icon">&#xe605;</i>勾选添加用户
                        </button>-->
            </div>
            <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字"
                   style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
                <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
                    <i class="layui-icon">&#x1006;</i>清除搜索
                </button>
            </div>
            <div class="demo-side">
                <table id="demoTreeTb"></table>
            </div>
        </div>
        <script type="text/html" id="barDemo">
            <button type="button" class="layui-btn layui-btn-radius" lay-event="add">添加</button>
            <button type="button" class="layui-btn layui-btn-radius" lay-event="del">批量删除</button>
            <button type="button" class="layui-btn layui-btn-radius" lay-event="show">展开</button>
            <!--        <a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
                    <a class="layui-btn layui-btn-xs" lay-event="del">批量删除</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="show">展开</a>-->
        </script>
        <!-- 表格操作列 -->
        <script type="text/html" id="tbBar">
            <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="del">删除</a>
        </script>

        <script>
            layui.config({
                base: '/layui/lay/modules/'      //自定义layui组件的目录
            }).extend({ //设定组件别名
                treeTable:   'treeTable',
                treeSelect: "treeSelect"
            });
            layui.use(['layer','tree', 'treeSelect','util', 'treeTable','form'], function () {
                var treeSelect = layui.treeSelect;
                var tree = layui.tree
                var form = layui.form;
                form.render();//渲染form
                var $ = layui.jquery;
                var layer = layui.layer;
                var util = layui.util;
                var treeTable = layui.treeTable;
                form.render('select');
                $('body').removeClass('layui-hide');
//开启节点操作图标
                treeSelect.render({
                    // 选择器
                    elem: '#tree',
                    // 数据
                    data: '/menu/treeSelect',
                    // 异步加载方式：get/post，默认get
                    type: 'get',
                    // 占位符
                    placeholder: '下拉框选择父菜单',
                    // 是否开启搜索功能：true/false，默认false
                    search: true,
                    // 一些可定制的样式
                    style: {
                        folder: {
                            enable: true
                        },
                        line: {
                            enable: true
                        }
                    },
                    // 点击回调
                    click: function(d){
                        //console.log(d);
                        console.log(d.current.name);
                        $('#parentId').val(d.current.id);
                        $('#parentName').val(d.current.name);
                    },
                    // 加载完成后的回调函数
                    success: function (d) {

                        treeSelect.refresh('tree');
                    }
                });
                /* $.ajax({
                     url: "/menu/tree",
                     type: "GET",
                     success: function (data) {
                         console.log(data);
                         tree.render({
                             elem: '#test9'
                             ,data: data
                             ,click: function(obj){
                                 layer.msg(JSON.stringify(obj.data));
                             }
                         });

                     }

                 });
         */

                form.on('submit(formDemo)', function(data){
                    //layer.msg(JSON.stringify(data.field));
                    $.ajax({
                        url: "/menu/add",
                        type: "POST",
                        data: {
                            'parentId': data.field.parentId,
                            'menuName':data.field.menuName,
                            'menuType':data.field.menuType,
                            'url':data.field.url,
                            'visible':data.field.visible,
                            'orderNum':data.field.orderNum,
                            'icon':data.field.icon,
                            'perms':data.field.perms,
                            'remark':data.field.remark,
                        },
                        success: function (msg) {
                            console.log(msg);
                            if(msg.code==200){
                                layer.msg("成功添加");
                            }else{
                                layer.msg(msg.msg);
                            }

                            insTb.refresh();
                            //location.reload();
                        }

                    });
                    return false;
                });
                form.on('submit(formDemoEdit)', function(data){
                    //layer.msg(JSON.stringify(data.field));
                    $.ajax({
                        url: "/menu/edit",
                        type: "PUT",
                        data: {
                            'menuId': data.field.menuId1,
                            'menuName':data.field.menuName1,
                            'menuType':data.field.menuType1,
                            'url':data.field.url1,
                            'visible':data.field.visible1,
                            'orderNum':data.field.orderNum1,
                            'icon':data.field.icon1,
                            'perms':data.field.perms1,
                            'remark':data.field.remark1,
                        },
                        success: function (msg) {
                            console.log(msg);
                            if(msg.code==200){
                                layer.msg("成功修改");
                            }else{
                                layer.msg(msg.msg);
                            }

                            insTb.refresh();
                            //location.reload();
                        }

                    });
                    return false;
                });
                // 渲染表格
                var insTb = treeTable.render({
                    elem: '#demoTreeTb',
                    url: 'menu/select',
                    toolbar: '#barDemo',
                    height: 'full-100',
                    tree: {
                        iconIndex: 2,
                        isPidData: true,
                        idName: 'menuId',
                        pidName: 'parentId',
                    },
                    defaultToolbar: ['filter', 'print', 'exports', {
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips'
                    }],
                    cols: [
                        /* [
                             {title: '只是想演示一个三级表头', colspan: 9},
                         ],
                         [
                             {title: '只是想演示一个多级表头', colspan: 4},
                             {field: 'menuUrl', title: '菜单地址', rowspan: 2},
                             {title: '这是一个二级表头', colspan: 4}
                         ],*/
                        [
                            {type: 'numbers'},
                            {type: 'checkbox'},
                            {field: 'menuName', title: '菜单名称', minWidth: 165},
                            {
                                title: '菜单图标', align: 'center', hide: false,
                                templet: '<p><i class="layui-icon {{d.icon}}"></i></p>'
                            },
                            {field: 'url', title: '权限url'},
                            {field: 'perms', title: '权限标识'},
                            {title: '类型', templet: '<p><button type="button" class="layui-btn layui-btn-sm layui-btn-normal">{{d.menuType=="C"?"菜单":(d.menuType=="M"?"目录":"按钮")}}</button></p>', align: 'center', width: 60},
                            {title: '可见', templet: '<p> <button type="button" class="layui-btn layui-btn-sm">{{d.visible=="0"?"显示":"隐藏"}}</button></p>', align: 'center', width: 60},
                            {//{{d.menuType=="C"?"菜单":"按钮"}}
                                title: '创建时间', templet: function (d) {
                                    return util.toDateString(d.createTime);
                                }
                            },
                            {
                                title: '更新时间', templet: function (d) {
                                    return util.toDateString(d.updateTime);
                                }
                            },
                            {field: 'createBy', title: '创建者'},
                            {field: 'remark', title: '备注'},
                            {align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
                        ]
                    ],
                    style: 'margin-top:0;',
                    done:function(result){
                        insTb.expandAll();
                    }
                });

                // 工具列点击事件
                treeTable.on('tool(demoTreeTb)', function (obj) {
                    var data = obj.data; //获得当前行数据
                    var event = obj.event;
                    if (event === 'del') {

                        layer.confirm('真的删除行么', function(index){
                            $.ajax({
                                url: "/menu/id",
                                type: "DELETE",
                                data: {'id': data.menuId},
                                success: function (msg) {
                                    if (msg.code == 200) {
                                        //删除这一行
                                        obj.del();
                                        //关闭弹框
                                        layer.close(index);
                                        layer.msg("删除成功", {icon: 6});
                                    } else {
                                        layer.msg("删除失败"+msg.msg, {icon: 5});
                                    }
                                }
                            });
                            layer.close(index);
                            //向服务端发送删除指令
                        });

                    } else if (event === 'edit') {
                        layer.msg('修改成功');
                        layer.open({
                                title: '添加菜单',
                                /*如果是外部的html，type2，内部，type1*/
                                type: 1,
                                btnAlign: 'c',
                                area: ['500px', '600px'],
                                content: $("#edit-main")
                                ,success: function(layero, index){


                                    var div = layero.find('#edit-permission');
                                    div.find("#menuId1").val(data.menuId);
                                    div.find("#menuName1").val(data.menuName);
                                    div.find("#url1").val(data.url);
                                    div.find("#perms1").val(data.perms);
                                    div.find("#icon1").val(data.icon);
                                    div.find("#orderNum1").val(data.orderNum);
                                    div.find("#remark1").val(data.remark);
                                    if (data.visible=="0"){
                                        div.find("#visible1").attr("checked","checked");
                                    } else {
                                        div.find("#visible2").attr("checked","checked");
                                    }
                                    console.log(data.menuType)
                                    if(data.menuType=="M"){
                                        div.find("#menuTypeM1").attr("checked","checked");
                                    }else if(data.menuType=="F"){
                                        div.find("#menuTypeF1").attr("checked","checked");
                                    }else if(data.menuType=="C"){
                                        div.find("#menuTypeC1").attr("checked","checked");
                                    }
                                form.render();//渲染form

                                }
                            }
                        );
                        obj.update({authorityName: '新的名称'});
                    }
                });

                // 头部工具栏点击事件
                treeTable.on('toolbar(demoTreeTb)', function (obj) {
                    switch (obj.event) {
                        case 'add':
                            layer.msg('添加');
                            layer.open({
                                    title: '添加菜单',
                                    /*如果是外部的html，type2，内部，type1*/
                                    type: 1,
                                    btnAlign: 'c',
                                    area: ['500px', '600px'],
                                    content: $("#add-main")
                                    ,success: function(layero, index){
                                        form.render();//渲染form
                                        var map=insTb.checkStatus(false).map(function (d) {
                                            return {
                                                authorityName: d.menuName,
                                                authorityId: d.menuId,
                                                LAY_INDETERMINATE: d.LAY_INDETERMINATE
                                            };
                                        });
                                        if(map.length==0){
                                            layer.msg("无选中父项,默认构建一级目录");
                                            var div = layero.find('#permission');
                                            div.find("#parentId").val(0);
                                            div.find("#parentName").val("无选中，默认为一级");
                                            div.find("#menuTypeM").attr("checked","checked");
                                            form.render();
                                        }else {
                                            var div = layero.find('#permission');
                                            div.find("#parentId").val(map[0].authorityId);
                                            div.find("#parentName").val(map[0].authorityName);
                                            div.find("#menuTypeF").attr("checked","checked");
                                        }
                                        //form.render();

                                    }
                                }
                            );

                            break;
                        case 'show':
                            layer.msg('展开');
                            insTb.expandAll();
                            break;
                        case 'del':
                            layer.msg('批量删除');
                            var map=insTb.checkStatus(false).map(function (d) {
                                return {

                                    'menuId': d.menuId,
                                    /*                            'menuName': d.menuName,
                                                                'isSelected': d.LAY_INDETERMINATE*/
                                };
                            });
                            var ids="";
                            map.map(function(el, index) {
                                if(index==0){
                                    ids=el.menuId;
                                }else{
                                    ids=ids+","+el.menuId;
                                }
                            });
                            console.log(ids);

                            layer.confirm('真的删除行么', function(index){
                                $.ajax({
                                    url: "/menu/ids",
                                    type: "DELETE",
                                    data:{'ids':ids},
                                    //data: {'ids': arr},
                                    success: function (msg) {
                                        console.log(map);
                                        if (msg.code == 200) {
                                            //删除这一行
                                            //obj.del();
                                            insTb.refresh();
                                            //关闭弹框
                                            layer.close(index);
                                            layer.msg("删除成功", {icon: 6});
                                        } else {
                                            layer.msg("删除失败"+msg.msg, {icon: 5});
                                        }
                                    }
                                });
                                layer.close(index);
                                //向服务端发送删除指令
                            });
                            break;
                        case 'LAYTABLE_TIPS':
                            layer.msg('提示');
                            break;
                    }
                });

                // 全部展开
                $('#btnExpandAll').click(function () {
                    insTb.expandAll();
                });

                // 全部折叠
                $('#btnFoldAll').click(function () {
                    insTb.foldAll();
                });

                // 展开指定
                $('#btnExpand').click(function () {
                    insTb.expand(2);
                });

                // 折叠指定
                $('#btnFold').click(function () {
                    insTb.fold(2);
                });

                // 设置选中
                $('#btnChecked').click(function () {
                    insTb.expand(4);
                    insTb.setChecked([4]);
                });

                // 搜索
                $('#btnSearch').click(function () {
                    var keywords = $('#edtSearch').val();
                    if (keywords) {
                        insTb.filterData(keywords);
                    } else {
                        insTb.clearFilter();
                    }
                });

                // 清除搜索
                $('#btnClearSearch').click(function () {
                    insTb.clearFilter();
                });

                // 重载
                $('#btnReload').click(function () {
                    insTb.reload();
                });
                $('#btnRefresh').click(function () {
                    insTb.refresh();
                });

                // 获取选中
                $('#btnGetChecked').click(function () {
                    layer.alert('<pre>' + JSON.stringify(insTb.checkStatus(false).map(function (d) {
                        return {
                            authorityName: d.menuName,
                            authorityId: d.menuId,
                            LAY_INDETERMINATE: d.LAY_INDETERMINATE
                        };
                    }), null, 3) + '</pre>');
                });

                /*        // 演示侧边栏
                        $('#btnToggleSide').click(function () {
                            $('.demo-side').toggleClass('show');
                        });*/

            });
        </script>
    </body>
</html>

重点数据的异步提交

form.on('submit(formDemo)', function(data){
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                url: "/menu",
                type: "POST",
                //data:data.field,
                data: {
                    'parentId': data.field.parentId,
                    'menuName':data.field.menuName,
                    'menuType':data.field.menuType,
                    'url':data.field.url,
                    'visible':data.field.visible,
                    'orderNum':data.field.orderNum,
                    'icon':data.field.icon,
                    'perms':data.field.perms,
                    'remark':data.field.remark,
                },
                success: function (msg) {
                    console.log(msg);
                    if(msg.code==200){
                        layer.msg("成功添加");
                    }else{
                        layer.msg(msg.msg);
                    }

                    insTb.refresh();
                    //location.reload();
                }

            });
            return false;
        });

弹窗填写

 layer.open({
                            title: '添加菜单',
                            /*如果是外部的html，type2，内部，type1*/
                            type: 1,
                            btnAlign: 'c',
                            area: ['500px', '600px'],
                            content: $("#add-main").html()
                            ,success: function(layero, index){
                            form.render();//渲染form
                                var map=insTb.checkStatus(false).map(function (d) {
                                    return {
                                        //可修改字段名
                                        authorityName: d.menuName,
                                        authorityId: d.menuId,
                                        LAY_INDETERMINATE: d.LAY_INDETERMINATE
                                    };
                                });
                                if(map.length==0){
                                    layer.msg("无选中父项,默认构建一级目录");
                                    var div = layero.find('#permission');
                                    div.find("#parentId").val(0);
                                    div.find("#parentName").val("无选中，默认为一级");
                                    div.find("#menuTypeM").attr("checked","checked");
                                    form.render();
                                }else {
                                    var div = layero.find('#permission');
                                    div.find("#parentId").val(map[0].authorityId);
                                    div.find("#parentName").val(map[0].authorityName);
                                    div.find("#menuTypeF").attr("checked","checked");
                                }


                            }
                        }
                    );

批量删除

                case 'del':
                    layer.msg('批量删除');
                    var map=insTb.checkStatus(false).map(function (d) {
                        return {

                            'menuId': d.menuId,
/*                            'menuName': d.menuName,
                            'isSelected': d.LAY_INDETERMINATE*/
                        };
                    });
                    var ids="";
                    map.map(function(el, index) {
                        if(index==0){
                            ids=el.menuId;
                        }else{
                            ids=ids+","+el.menuId;
                        }
                    });
                    console.log(ids);

                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            url: "/menu/ids",
                            type: "DELETE",
                            data:{'ids':ids},
                            //data: {'ids': arr},
                            success: function (msg) {
                                console.log(map);
                                if (msg.code == 200) {
                                    //删除这一行
                                    obj.del();
                                    //关闭弹框
                                    layer.close(index);
                                    layer.msg("删除成功", {icon: 6});
                                } else {
                                    layer.msg("删除失败", {icon: 5});
                                }
                            }
                        });
                        layer.close(index);
                        //向服务端发送删除指令
                    });

获取监听事件中，行信息

  var data = obj.data; //获得当前行数据
    var event = obj.event;//获得当前事件

设置单选框选中情况

//第一种
<div class="input-group">    
        <input id="type1" type="radio" name="type"  value="true">菜单
        <input id="type2" type="radio" name="type"  value="false">按钮
    </div>

 $("#type1").removeAttr("checked");
 $("#type2").attr("checked","checked");  

//第二种
<input type="radio" name="sex" id="sex" value="1" title="？"> 
$("input[name=sex][value=1]").attr("checked", data.UserSex == 1 ? true : false); 
                                if(data.menuType=="M"){
                                    div.find("#menuTypeM1").attr("checked","checked");
                                }else if(data.menuType=="F"){
                                    div.find("#menuTypeF1").attr("checked","checked");
                                }else if(data.menuType=="C"){
                                    div.find("#menuTypeC1").attr("checked","checked");
                                }
                                //必须调用form刷新，否则选中情况失效
                                form.render();

获取单选框选中情况

获取单选框的值有5种方式：
1、$('input:radio:checked').val()；
2、$("input[type='radio']:checked").val();
3、$("input[name='rd']:checked").val();

4,$(":radio[checked]").each(function(radio){
alert($(this).val());

5,jq1.4以上版本用 $("input[name='user']:checked").val(); 也可以获取到的

指定id查找html元素

var div = layero.find('#edit-permission');
div.find("#menuId1").val(data.menuId);
//map循环构建数组   后端Set<> ids
                    var ids="";
                    map.map(function(el, index) {
                        if(index==0){
                            ids=el.menuId;
                        }else{
                            ids=ids+","+el.menuId;
                        }
                    });
                    console.log(ids);

转化为json字符串

JSON.stringify(data)

数组操作

JS数组与集合

https://www.jianshu.com/p/c55eb7e4f491

加入搜索条件表单重载

       //监听提交 lay-filter="search"
        form.on('submit(search)', function(data){
            layer.msg(JSON.stringify(data.field));//表格数据序列化
            var formData = data.field;
            console.debug(formData);
            var name = formData.name,
                url=formData.url,
                icon=formData.icon,
                parent_id=formData.parent_id;
            //数据表格重载
            table.reload('tableReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {//这里传参  向后台
                    name: name,
                    url:url
                }
                , url: '/menu/page'//后台做模糊搜索接口路径
                , method: 'post'
            });
            return false;//false：阻止表单跳转  true：表单跳转
        });
    });

忘了提示layer.open时，不要打开指定id的div后缀加.html(),会导致下拉框失效

热水养鲨鱼
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Layui-多选select
weixin_54668937的博客
02-24 1万+
Layui-多选select 文献种类：专题技术文献； 开发工具与关键技术： VS、JS 作者：方建恒 ；年级：20级 ；撰写时间： 2022 年 2 月 18日 今天我们来讲一下Layui插件里的一个扩展—多选select。 在layui的表单中我们的下拉框是单选的， 当我们在运用时需要多选时，我们得用到Layui下拉框的扩展部分。 接下来我们来实际运用一下： 首先我们把Layui的JS和CSS引入，注：此处layui的版本为2.4.5。 然后把以下的Layui下拉框的扩展内容的样式
layui-多选下拉框-xm-select-demo源码
10-10
《layui-多选下拉框-xm-select：前端开发中的高效解决方案》 在现代Web开发中，用户界面的交互性和易用性是至关重要的。layui框架以其轻量级、高效和丰富的组件库，成为了众多开发者青睐的选择。尤其在构建多选...
layui使用tree实现树形下拉菜单
热门推荐
踮脚敲代码
10-31 1万+
一. 效果演示 看到效果图是不是有点小心动，接下来附上源码、呈上教程 layui实现树形下拉列表源码，点击下载 二. 插入css样式、引用js插件 <link rel="stylesheet" href="layui/css/layui.css" media="all"> <style type="text/css"> .treeSelect .layui-select-title span { line-height: 38px; } .layui-form-sel
layui table 多级表头的使用
最新发布
在原七海的博客
05-06 1054
layui table 多级表头的使用教程与示例
利用layui完成树状图
weixin_44554896的博客
07-17 6041
开发工具与关键技术：Visual Studio 2015 layui 作者：孙水兵 撰写时间：2019年7月17 一、 达到的效果 二、 涉及的表格 用户类型表（SYS_UserType）、权限表（PW_Jurisdiction）、详细模块表（SYS_DetailModular）、模块表（SYS_Modular）。其中详细模块表中包含的是模块下面的一些子页面的名称。而权限表是用来连接用户表...
layui 树形组件下拉框
Start2019
06-14 4626
采用 layui 树形组件，版本：V2.6.8。只需要更新layui版本，不需要下载 tableSelect 第三方扩展组件。
layui-tree创建下拉树型选项框
weixin_30768175的博客
02-20 831
1.简介 　　也许你对树菜单再熟悉不过了，然而你仍有可能更青睐layui的tree，它也许比以往你知道的任何一个类似的组件都更轻量、简单，你在享受许多功能的同时，甚至不用去记太多的参数。 另外，最大的重点在于，她在UI上完全遵循于当下主流的风格，并且具备高度可扩展性，会与你的许多页面非常融洽的并存。 2.制作如下案例 步骤1.编写html <div class=...
layui-多选下拉框-xm-select.rar
12-06
layui的插件效果，优化基础layui的原装组件的效果。 layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，...
layui多选下拉框样式，整套layui-select-multiple
12-09
Layui是一个强大的前端UI框架，它提供了一系列美观且易于使用的组件，包括我们所讨论的多选下拉框。"layui-select-multiple"就是Layui专门为多选下拉框设计的一整套样式和功能。 首先，我们来看“layui多选下拉框...
前端 layui-fromSelects 下拉框多选,搜索
03-30
在前端开发中，Layui 是一款非常受欢迎的轻量级前端框架，它提供了丰富的组件和样式，使得页面布局和交互设计变得简单易行。在本主题中，我们主要探讨的是如何利用 Layui 实现一个功能完备的下拉框选择器，支持多选...
layui-级联下拉框-可配置开启多选-HTML源码
10-02
级联下拉框是一种常见的UI组件，它允许用户在一个下拉框的选择基础上动态加载并显示另一个相关的下拉框，这种联动效果在数据筛选、地区选择等场景中非常常见。 1. HTML基础： HTML（HyperText Markup Language）...
layui+ztree下拉树，支持单选和多选
09-11
layui+ztree下拉树，支持单选和多选，简单封装方便实用
LayUI树形下拉多选选择器扩展包
03-21
LayUI树形下拉多选选择器扩展包
layui tree 节点搜索，dom
weixin_39143969的博客
05-15 338
form.on('submit(searchUnit)', function(params){ var treeElem = $('#treeList'), filterElem = $('[name="keyword"]'); if (!filterElem.length || !filterElem.length) { return; } var value = filterElem.val(); v
React TreeSelect 下拉树状结构数据格式修改
m0_71266141的博客
10-09 940
React TreeSelect 封装修改下拉列表数据结构
layui的select多选解决方案
u013251507的博客
01-31 2045
获取value字符串</button><button class="btn" id="value">获取value数组</button><button class="btn" id="name">获取name数组
【vue】Treeselect树形选择器使用
小朋友的博客
11-19 2021
Treeselect树形选择器使用
thymeleaf实现树状下拉框
陈小翔的博客
03-24 2538
项目场景： 项目场景：thymeleaf：实现省市县树状下拉框 问题描述 这是一个开发需求，由于本人不太熟悉thymeleaf模板引擎，所以将实现方式记录于此； 解决方案： 废话不多说，直接上解决方案 数据库结构：经典的省市县字典表结构 后端接口 ...
【Layui-treeSelect】Select 树状下拉 遇到的问题
aadnf的博客
04-13 723
Select 树状下拉 treeSelect.checkNode('tree', 3); 时报错 Cannot read property 'getNodeByParam' of null
获取layui下拉框data-属性
06-07
可以使用以下代码获取layui下拉框的data属性值： ```javascript var selectElem = layui.jquery('#selectElemId'); var dataValue = selectElem.find(':selected').data('value'); ``` 其中，selectElemId是下拉框的id属性值，data('value')代表获取data-value属性的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值