Ztree 載入許可權列表

阿新 • • 發佈：2021-08-19

jquery.ztree.all.min.js 如何使用，這是一個簡單的例子；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>角色授權</title>
  <link rel="stylesheet" href="__LAYUI__/css/layui.css">
  <link rel="stylesheet" href="__ZTREE__/css/ztree-metro-style.css">
</head>
<body>
<div style="padding: 20px;">
    <ul id="tree" class="ztree" ></ul>
    <input type="hidden" id="role_id" name="id" value="{$id}">
    <button class="layui-btn layui-btn-sm" id="auth-btn">確認</button>
</div>
<script src="__JS__/jquery.min.js"></script>
<script src="__LAYUI__/layui.js"></script>
<script src="__ZTREE__/js/jquery.ztree.all.min.js"></script>
<script>
    layui.use('layer', function(){
        var layer = layui.layer;
        $(function(){
           //載入樹形授權選單
            var role_id = $("#role_id").val();
            var tree = $("#tree");
            var zTree;
            //配置項
            var setting = {
                check: {
                    enable: true
                },
                view: {
                    dblClickExpand: false,
                    showLine: true,
                    showIcon: false,
                    selectedMulti: false
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pid",
                        rootpid: 0
                    },
                    key: {
                        name: "name"
                    }
                }
            };
            $.ajax({
                url: "{:url('admin/role/ajaxGetRoles')}",
                type: "post",
                dataType: "json",
                cache: false,
                data: {id: role_id},
                success: function (data) {
                    zTree = $.fn.zTree.init(tree, setting, data);
                    //zTree.expandAll(true);//預設全部展開
                }
            });
            $("#auth-btn").on("click", function () {
                var checked_ids,rules_ids = [];
                checked_ids = zTree.getCheckedNodes(); // 獲取當前選中的checkbox
                $.each(checked_ids, function (index, item) {
                    rules_ids.push(item.id);
                });
                $.ajax({
                    url: "{:url('admin/role/ajaxUpdateRules')}",
                    type: "post",
                    data: {
                        id: role_id,
                        ids: rules_ids
                    },
                    success: function (data) {
                        layer.msg(data.msg,{icon:1,time:500});
                        if(data.code === 1){
                            setTimeout(function () {
                                parent.location.href = data.url;
                            }, 1000);
                        }
                    }
                });
            }); 
        })
    });
</script>
</body>
</html>

耶和華是我的牧者，我必不至缺乏。