zTree前端简单结构

2024-01-05 13:04:04
<%--
  Created by IntelliJ IDEA.
  User: yuxy
  Date: 2021/10/20
  Time: 9:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>资源管理</title>
    <jsp:include page="/common/head.jsp"/>
</head>
<body>
<jsp:include page="/common/nav.jsp"/>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">资源管理
                        <button  class="btn btn-primary" οnclick="showAddDlg()"><span class="glyphicon glyphicon-plus"></span>增加</button>
                        <button  class="btn btn-danger" οnclick="deleteBatch()"><span class="glyphicon glyphicon-trash"></span>删除</button>
                        <button  class="btn btn-warning" οnclick="showEditDlg()"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
                    </h3>

                </div>
                <div class="panel-body">
                    <ul id="resourceTree" class="ztree"></ul>
                </div>
            </div>

        </div>
    </div>
</div>

<div id="addDiv" style="display: none">
    <form class="form-horizontal">
        <div class="form-group">
            <label  class="col-sm-2 control-label">资源名:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="resourceName"  placeholder="请输入资源名">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">类型:</label>
            <div class="col-sm-4">
                <input type="radio"  name="resourceType" value="Button">按钮
                <input type="radio"  name="resourceType" value="Menu">菜单
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">URL地址:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="url" name="url" placeholder="请输入URL地址">
            </div>
        </div>
    </form>
</div>

<div id="editDiv" style="display: none">
    <form class="form-horizontal">
        <div class="form-group">
            <label  class="col-sm-2 control-label">资源名:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="edit_resourceName"  placeholder="请输入资源名">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">类型:</label>
            <div class="col-sm-4">
                <input type="radio"  name="edit_resourceType" value="Button">按钮
                <input type="radio"  name="edit_resourceType" value="Menu">菜单
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">URL地址:</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="edit_url" name="url" placeholder="请输入URL地址">
            </div>
        </div>
    </form>
</div>
<jsp:include page="/common/script.jsp"/>
<script>
    $(function () {
        initTree();
    })
    
    function showEditDlg() {
        var treeObj = $.fn.zTree.getZTreeObj("resourceTree");
        var nodes = treeObj.getSelectedNodes();
        if (nodes.length == 1) {
            // 当前选中的节点
            let node = nodes[0];
            var v_id = node.id;
            var v_fatherId = node.fatherId;
            $.ajax({
                type:"post",
                url:"/resource/find.jhtml",
                data:{"id":v_id},
                success:function (res) {
                    if (res.code == 200) {
                        var v_data = res.data;
                        console.log(v_data);
                        // 备份
                        var v_html = $("#editDiv").html();
                        // 赋值
                        $("#edit_resourceName").val(v_data.resourceName);
                        $("#edit_url").val(v_data.resourceUrl);
                        $("input[name='edit_resourceType']:radio").each(function () {
                            if (this.value == v_data.resourceType) {
                                this.checked=true;
                            }
                        })
                        // 弹框
                        var v_updateResourceDlg = bootbox.dialog({
                            title: '修改资源',
                            message:$("#editDiv form"),
                            size:"large",
                            buttons: {
                                confirm: {
                                    label: '<span class="glyphicon glyphicon-ok"></span>确认',
                                    className: 'btn-primary',
                                    callback: function(){
                                        // 更新
                                        var v_param = {};
                                        v_param.id=v_id;
                                        v_param.resourceName=$("#edit_resourceName", v_updateResourceDlg).val();
                                        v_param.resourceUrl=$("#edit_url", v_updateResourceDlg).val();
                                        v_param.resourceType=$("input[name='edit_resourceType']:radio:checked", v_updateResourceDlg).val();
                                        v_param.fatherId=v_fatherId;
                                        $.ajax({
                                            type:"post",
                                            url:"/resource/update.jhtml",
                                            data:v_param,
                                            success:function (res) {
                                                if (res.code == 200) {
                                                    console.log(res.data);
                                                    console.log(node);
                                                    var v_data=res.data;
                                                    node.resourceName=v_data.resourceName;
                                                    node.id=v_data.id;
                                                    node.fatherId=v_data.fatherId;
                                                    node.resourceType=v_data.resourceType;
                                                    node.resourceUrl=v_data.resourceUrl;
                                                    treeObj.updateNode(node);
                                                }
                                            }
                                        })
                                    }
                                },
                                cancel: {
                                    label: '<span class="glyphicon glyphicon-remove"></span>取消',
                                    className: 'btn-danger'
                                }
                            }
                        });
                        // 还原
                        $("#editDiv").html(v_html);
                    }
                }
            })
        } else {
            // 请选择
            bootbox.alert({
                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>请选择一个节点",
                size: 'small',
                title: "提示信息"
            });
        }
    }
    
    function deleteBatch() {
        var treeObj = $.fn.zTree.getZTreeObj("resourceTree");
        var nodes = treeObj.getSelectedNodes();
        if (nodes.length > 0) {
            // 当前选中节点及其它下面的子子孙孙节点
            var nodeArr = treeObj.transformToArray(nodes);
            console.log(nodeArr);
            var v_idArr = [];
            for (var i = 0; i < nodeArr.length; i++) {
                v_idArr.push(nodeArr[i].id);
            }
            $.ajax({
                type:"post",
                url:"/resource/deleteBatch.jhtml",
                data:{"ids":v_idArr.join(",")},
                success:function (res) {
                    if (res.code == 200) {
                        for (var i = 0; i < nodeArr.length; i++) {
                            treeObj.removeNode(nodeArr[i]);
                        }
                    }
                }
            })
        } else {
            // 请选择
            bootbox.alert({
                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>请选择节点",
                size: 'small',
                title: "提示信息"
            });
        }
    }
    
    function showAddDlg() {
        var treeObj = $.fn.zTree.getZTreeObj("resourceTree");
        var nodes = treeObj.getSelectedNodes();
        console.log(nodes);
        // 你怎么知道用户，选中了一个节点吗？
        if (nodes.length == 1) {
            // 你怎么获取选中节点的id?
            var v_fatherId = nodes[0].id;
            // 备份
            var v_html = $("#addDiv").html();
            var v_addResourceDlg = bootbox.dialog({
                title: '增加资源',
                message:$("#addDiv form"),
                size:"large",
                buttons: {
                    confirm: {
                        label: '<span class="glyphicon glyphicon-ok"></span>确认',
                        className: 'btn-primary',
                        callback: function(){
                            var v_param = {};
                            v_param.resourceName=$("#resourceName", v_addResourceDlg).val();
                            v_param.fatherId=v_fatherId;
                            v_param.resourceUrl=$("#url", v_addResourceDlg).val();
                            v_param.resourceType=$("input[name='resourceType']:radio:checked", v_addResourceDlg).val();
                            console.log(v_param);
                            $.ajax({
                                type:"post",
                                url:"/resource/add.jhtml",
                                data:v_param,
                                success:function (res) {
                                    if (res.code == 200) {
                                        // 刷新【不合适】
                                        var newNode = res.data;
                                        // 怎么获取父节点[当前选中的节点]
                                        treeObj.addNodes(nodes[0], newNode);
                                    }
                                }
                            })
                        }
                    },
                    cancel: {
                        label: '<span class="glyphicon glyphicon-remove"></span>取消',
                        className: 'btn-danger'
                    }
                }
            });
            // 还原
            $("#addDiv").html(v_html);
        } else if(nodes.length > 1){
            // 请选择
            bootbox.alert({
                message: "<span class='glyphicon glyphicon-exclamation-sign'></span>请选择一个节点",
                size: 'small',
                title: "提示信息"
            });
        } else {
            //增加*节点
            var v_fatherId = 0;
            // 备份
            var v_html = $("#addDiv").html();
            var v_addResourceDlg = bootbox.dialog({
                title: '增加资源',
                message:$("#addDiv form"),
                size:"large",
                buttons: {
                    confirm: {
                        label: '<span class="glyphicon glyphicon-ok"></span>确认',
                        className: 'btn-primary',
                        callback: function(){
                            var v_param = {};
                            v_param.resourceName=$("#resourceName", v_addResourceDlg).val();
                            v_param.fatherId=v_fatherId;
                            v_param.resourceUrl=$("#url", v_addResourceDlg).val();
                            v_param.resourceType=$("input[name='resourceType']:radio:checked", v_addResourceDlg).val();
                            console.log(v_param);
                            $.ajax({
                                type:"post",
                                url:"/resource/add.jhtml",
                                data:v_param,
                                success:function (res) {
                                    if (res.code == 200) {
                                        // 刷新【不合适】
                                        var newNode = res.data;
                                        // 怎么获取父节点[当前选中的节点]
                                        treeObj.addNodes(nodes[0], newNode);
                                    }
                                }
                            })
                        }
                    },
                    cancel: {
                        label: '<span class="glyphicon glyphicon-remove"></span>取消',
                        className: 'btn-danger'
                    }
                }
            });
            // 还原
            $("#addDiv").html(v_html);
        }

    }
    
    function initTree() {
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    pIdKey: "fatherId",
                },
                key: {
                    name: "resourceName"
                }
            }
        };

        $.ajax({
            type:"post",
            url:"/resource/list.jhtml",
            success:function (res) {
                if (res.code == 200) {
                    $.fn.zTree.init($("#resourceTree"), setting, res.data);
                }
            }
        })
    }
</script>
</body>
</html>
码农公寓

相关文章
