layui实现树菜单

layui实现树菜单

页面HTML

<div class="layui-fluid">

    <div class="layui-card">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>设置角色菜单按钮</legend>
        </fieldset>
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">设置权限</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">重置</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">清空勾选</button>
        </div>
        <div id="test12" class="demo-tree-more"></div>
    </div>
</div>

js

		var treeData = new Array(); //树数据
        var dataIntArr = [];//保存转换后的整型字符串
        $.ajax({
            type: "post",
            url: "/",
            datatype: "json",
            data: {
                id: id
            }
            , success: function (succ) {
                if (succ.code == "1") {
                 	//把所有菜单的数据设置给treeData
                    treeData = succ.data.treeData;
                    //拿到用户拥有的菜单
                    var checkStr = succ.data.checkData;
                    if (checkStr == "" || checkStr == undefined || checkStr == null ||
                        (checkStr.length > 0 && checkStr.trim().length == 0)) {
                    } else {
                        var dataStrArr = checkStr.split(",");  //分割成字符串数组
                        dataIntArr = dataStrArr.map(function (i) {
                            return Number(i)
                        });
                    }
                    //渲染页面dom
                    tree.render({
                        elem: '#test12'
                        , data: treeData //整个菜单树数据
                        , showCheckbox: true  //是否显示复选框
                        , id: 'demoId1'  //设置id
                        , isJump: false //是否允许点击节点时弹出新窗口跳转
                    });
                    //设置用户有的菜单选项
                    tree.setChecked('demoId1', dataIntArr);
                } else if (succ.code == "0") {
                    layer.msg(succ.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('服务器响应超时,请刷新后重试...');
                layer.close(index);
            }
        });
        
        // 页面按钮事件
        util.event('lay-demo', {
             //设置权限
            getChecked: function (othis) {
                var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
                $.ajax({
                    type: "post",
                    url: "/",
                    data: {
                        json: JSON.stringify(checkedData),
                        id: id
                    },
                    dataType: 'json',
                    success: function (succ) {
                        if (succ.code == "1") {
                            layer.msg(succ.msg);

                        } else if (succ.code == "0") {
                            layer.msg(succ.msg);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.msg('服务器响应超时,请刷新后重试...');
                        layer.close(index);
                    }
                });
            }
            //重置
            , setChecked: function () {
                console.log(dataIntArr);
                tree.setChecked('demoId1', dataIntArr); //勾选指定节点
            }
            //清空勾选
            , reload: function () {
                //重载实例
                tree.reload('demoId1', {});

            }
        });
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值