layui中tree

最新推荐文章于 2023-12-20 17:04:12 发布

南是北边的北

最新推荐文章于 2023-12-20 17:04:12 发布

阅读量429

点赞数 1

分类专栏： tree

本文链接：https://blog.youkuaiyun.com/showadmin/article/details/104468244

版权

tree 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在layui框架下集成并使用tree组件，包括数据加载、节点操作、事件监听等功能，帮助读者理解layui中tree的配置与应用。

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

//递归拼接 tree 所需数据格式 $a  三级分类  flag 是修改的数据 判断出现过 就是添加 flag 
function get_attr($a,$pid = 0){
    $tree = array();
    foreach($a as $v){
        if($v['pid'] == $pid){
            $arr['children'] = get_attr($a,$v['priv_id']);
            if($arr['children'] == null){
                unset($arr['children']);
            }
            $arr['id'] = $v['priv_id'];
            $arr['title'] = $v['priv_name'];
            if(isset($v['flag'])){
                $arr['spread'] = true;
                $arr['checked'] = true;
            }
            $tree[] = $arr;
        }
    }
    return $tree;
}

   <div class="layui-form-item">
                    <label class="layui-form-label">权限选择</label>
                    <div class="layui-input-block">
                        <div id="test12" class="demo-tree-more"></div>
                    </div>
                </div>

<script>


    layui.use(['form', 'layedit', 'laydate','tree','util'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util
        //基本演示
        window.onload= function(){
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "{:url('login/Role/getClass')}",
                data:{'data':1},
                success: function (res) {
                    if(res.status == 1){
                        tree.render({
                            elem: '#test12'
                            ,data: res.data
                            ,showCheckbox: true  //是否显示复选框
                            ,id: 'id'

                        });
                    }

                }
            });
        }
        //递归获取选中的id 以逗号分隔 的字符串
        function getCheckedId(jsonObj) {
            var id = "";
            $.each(jsonObj, function (index, item) {
                if (id != "") {
                    id = id + "," + item.id;
                }
                else {
                    id = item.id;
                }
                var i = getCheckedId(item.children);
                if (i != "") {
                    id = id + "," + i;
                }
            });
            return id;
        }

        form.on('submit(userAdd)', function(data){
            var checkedData = tree.getChecked('id'); //获取选中节点的数据
            var ids = getCheckedId(checkedData);
            var info = data.field.role_name;
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{:url('login/Role/RoleAdd')}",
                data: {'role_name':info,"ids":ids},  //表单数据
                success: function (res) {

                    if (res.status == 1) {

                        layer.msg(res.msg, {icon: 6, time: 1000, shade: [0.6, '#000', true]});
                        //延迟1秒执行，目的是让用户看到提示
                        setTimeout( function(){

                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }, 1 * 1000 );
                    };
                },
                error : function() {
                    layer.msg('后台异常！未添加成功');
                }
            });
            //阻止页面跳转
            return false;
        });

        form.verify({

            passwords:function(value){

                if($('input[name=password]').val() !== value)

                    return '两次密码输入不一致！';

            }


        });


    });
//关闭弹框
    function closeCurrForm(){
        //获取窗口索引
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>