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

最新推荐文章于 2024-05-16 01:38:18 发布
最新推荐文章于 2024-05-16 01:38:18 发布
阅读量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使用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渲染多级表头和设置表格颜色
最新发布
2401_84047990的博客
05-16 418
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
利用layui完成树状图
weixin_44554896的博客
07-17 6050
开发工具与关键技术：Visual Studio 2015 layui 作者：孙水兵 撰写时间：2019年7月17 一、 达到的效果 二、 涉及的表格 用户类型表（SYS_UserType）、权限表（PW_Jurisdiction）、详细模块表（SYS_DetailModular）、模块表（SYS_Modular）。其中详细模块表中包含的是模块下面的一些子页面的名称。而权限表是用来连接用户表...
layui 树形组件下拉框
Start2019
06-14 4651
采用 layui 树形组件，版本：V2.6.8。只需要更新layui版本，不需要下载 tableSelect 第三方扩展组件。
layui-tree创建下拉树型选项框
weixin_30768175的博客
02-20 836
1.简介 　　也许你对树菜单再熟悉不过了，然而你仍有可能更青睐layui的tree，它也许比以往你知道的任何一个类似的组件都更轻量、简单，你在享受许多功能的同时，甚至不用去记太多的参数。 另外，最大的重点在于，她在UI上完全遵循于当下主流的风格，并且具备高度可扩展性，会与你的许多页面非常融洽的并存。 2.制作如下案例 步骤1.编写html <div class=...
layui tree 节点搜索，dom
weixin_39143969的博客
05-15 345
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 954
React TreeSelect 封装修改下拉列表数据结构
layui的select多选解决方案
u013251507的博客
01-31 2315
获取value字符串</button><button class="btn" id="value">获取value数组</button><button class="btn" id="name">获取name数组
【vue】Treeselect树形选择器使用
小朋友的博客
11-19 2027
Treeselect树形选择器使用
thymeleaf实现树状下拉框
陈小翔的博客
03-24 2544
项目场景： 项目场景：thymeleaf：实现省市县树状下拉框 问题描述 这是一个开发需求，由于本人不太熟悉thymeleaf模板引擎，所以将实现方式记录于此； 解决方案： 废话不多说，直接上解决方案 数据库结构：经典的省市县字典表结构 后端接口 ...
layui+ztree下拉树，支持单选和多选
09-11
layui+ztree下拉树，支持单选和多选，简单封装方便实用
LayUI树形下拉多选选择器扩展包
03-21
LayUI树形下拉多选选择器扩展包
【Layui-treeSelect】Select 树状下拉 遇到的问题
aadnf的博客
04-13 741
Select 树状下拉 treeSelect.checkNode('tree', 3); 时报错 Cannot read property 'getNodeByParam' of null
springBoot+thymeleaf框架实现cms内容管理和商城系统
weixin_45783387的博客
11-07 1239
springBoot+thymeleaf框架实现cms内容管理和商城系统 概要介绍 基于开源框架springBoot2.3+thymeleaf+springSecurity+lucene8.5.2 是在FEBS-Security 权限管理脚手架上增加了cms内容管理和商城管理以及会员中心三个主要模块并集成lucene对商品全文检索,升级了springboot到了最新2.3版本,同时采用 Light Year Admin模板做为管理后台前端. 目前还有很多功能不完善，尤其是模板前端部分。 目前前端输出都使用的
对layui tree 和输入框结合扩展 treeSelect
qq_20448967的博客
07-05 9556
扩展lyaui的组件 效果图如下用法如下：&lt;input type="text" id="treeSelect" autocomplete="off" class="layui-input " &gt;js:treeSelect.render({ elem:"#treeSelect", url:"portal", type:'GET',
关于antd的treeselect使用
chenqk_123的专栏
12-24 1万+
在表单中，我们可能会碰到这样的需求，比如我想将某一个物品或者资产，分配到某一个部门的员工下，那么我们需要在表单中做这样的配置： 这样就会用到antd的treeselect组件，组件很好用，自带搜索框，可以大大的提高用户的可操作性。 我们来看一下代码的结构： import { TreeSelect } from 'antd'; const { TreeNode } = TreeSele...
layui 的单选框
weixin_34192732的博客
06-12 781
<div class="layui-form-item"> <label class="layui-form-label">是否通过</label> <div class="layui-input-block"> <input type="radio" name="state" value="1" title="通过"...
layui 数据表格内嵌上传按钮，并在上传中增加所在行的id或其他属性
qq_34409900的博客
04-28 5306
碰到的需求是表格中每一行都要上传的按钮操作。 遇到的问题是不知道怎么把行里面的数据传到后台（因为要根据id进行相应的保存） 解决方法是： //把行里的数据拼接到上传的元素中： <a class='table-btn uploadTableInfo' value='"+d.TASKID+","+d.XRID+"' lay-event='scbb'>上传报表</...
获取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、付费专栏及课程。

余额充值