sso项目第三天 ztree

最新推荐文章于 2021-12-05 20:00:22 发布

d_jiabo

最新推荐文章于 2021-12-05 20:00:22 发布

阅读量195

点赞数

分类专栏： damai项目大麦项目心得文章标签： ztree js 添加点击事件数据库读取数据显示ztree

本文链接：https://blog.csdn.net/d_jiabo/article/details/76482663

版权

大麦项目心得同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

damai项目

2 篇文章 0 订阅

订阅专栏

1.ztree的显示

(1)html代码

（2）js代码（因为它自带的删除与编辑添加功能都是基于本地浏览器的添加删除，不会操作数据库，所以要在它原本的des的功能之前进行拦截，调用自己的可以操作数据库的des功能）

var setting = {

    async: {

        enable: true,
        url:ctx + "/systemWeb/getAllSystemAndPermissionList",
        autoParam:["id","name"],
        otherParam:{"otherParam":"zTreeAsyncTest"},
        dataFilter: filter,
        contentType : "application/json"
    },
    view: {
        expandSpeed:"",
        addHoverDom: addHoverDom,
        removeHoverDom: removeHoverDom,
        selectedMulti: false
    },
    edit: {
        enable: true,
        showRenameBtn: showRenameBtn
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onAsyncSuccess : ztreeOnAsyncSuccess,
        onClick:zTreeOnclick,
        beforeRemove: beforeRemove,
        onExpand:onExpand
        // beforeRename: beforeRename
    }
};
function onExpand(event,treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj(treeId);
    zTree.expandNode(treeNode,true,false,true,false);
}
function ztreeOnAsyncSuccess(event,treeId, treeNode){
    var url = ctx + "/systemWeb/getAllSystemAndPermissionList";
    $.ajax({
        type : "post",
        url : url,
        data : "",
        dataType : "json",
        async : true,
        success : function(jsonData) {
            if (jsonData != null) {
                var data = jsonData.unitList;
                if(data != null && data.length != 0){
                    if(treeNode == undefined){
                        treeObj.addNodes(null,data,true);// 如果是根节点，那么就在null后面加载数据
                    }
                    else{
                        treeObj.addNodes(treeNode,data,true);//如果是加载子节点，那么就是父节点下面加载
                    }
                }
                treeObj.expandNode(treeNode,true, false, false);// 将新获取的子节点展开
            }
        },
        error : function() {
            alert("请求错误！");
        }
    });
}
function zTreeOnclick(event,treeId,treeNode){
    if(treeNode.pId==null){
        $("#permission").hide();
        $("#system").show();
        var portal={
            'systemId':treeNode.id
        }

        $.post(ctx + "/systemWeb/getSystemInfoById",portal,function(data){
             var system=JSON.parse(data);
            $('#sId').val(system.data.systemId);
            $('#sname').val(system.data.systemName);
            $('#saddress').val(system.data.systemAddress);
            $('#sappId').val(system.data.appId);
            $('#sappSecret').val(system.data.appSecret);
        });
    }else{
        $("#permission").show();
        $("#system").hide();
        var portal={
            'permissionId':treeNode.id
        }

        $.post(ctx + "/permissionWeb/getPermissionInfoById",portal,function(data){
            var permission=JSON.parse(data);
            permission=JSON.parse(data);
            $('#pId').val(permission.data.permissionId);
            $('#pname').val(permission.data.permissionName);
            $('#pimportantGrade').val(permission.data.importantGrade);
            $('#pidCode').val(permission.data.idCode);
            $('#purl').val(permission.data.url);
            $('#porderNumber').val(permission.data.orderNumber);
            $('#premark').val(permission.data.remark);
        });
    }
}



function filter(treeId, parentNode, childNodes) {
    if (!childNodes) return null;
    //debugger;
    for (var i=0, l=childNodes.length; i<l; i++) {
        //debugger;
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        childNodes[i].id = childNodes[i].id;
    }
    return childNodes;
}
function beforeRemove(treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.selectNode(treeNode);
    if (treeNode.pId == null) {
        if (confirm("是否确认删除？")) {
            portal = {
                'systemId': treeNode.id
            }
            $.post(ctx + "/systemWeb/deleteSystem", portal, function (data) {
                if (data.returnValue == 0) {
                    alert('成功！');
                } else {
                    alert('失败！');
                }
            }, "json")
        }
    }else{
        if (confirm("是否确认删除？")) {
            portal = {
                'permissionId': treeNode.id
            }
            $.post(ctx + "/permissionWeb/deletePermission", portal, function (data) {
                if (data.returnValue == 0) {
                    alert('成功！');
                } else {
                    alert('失败！');
                }
            }, "json")
        }
}
    window.location.reload();

}
function showRenameBtn(treeId, treeNode) {
    return null;
}

var newCount = 1;
function addHoverDom(treeId, treeNode) {
    var sObj = $("#" + treeNode.tId + "_span");
    if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
    var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
        + "' title='add node' οnfοcus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_"+treeNode.tId);

    if (btn) btn.bind("click", function(){
        add_system(treeNode);
        //点击+号

    });
};
function removeHoverDom(treeId, treeNode) {
    $("#addBtn_"+treeNode.tId).unbind().remove();
};

$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting);
});

//向后台发送数据
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});

**********显示的数据格式*******

/* StringBuilder sb = new StringBuilder();
            sb.append("[");
            sb.append("{\"id\":\"1\",\"name\":\"销售单管理\",\"pId\":\"0\"},");
            sb.append("{\"id\":\"101\",\"name\":\"销售单列表\",\"pId\":\"1\"},");
            sb.append("{\"id\":\"102\",\"name\":\"销售单综合查询\",\"pId\":\"1\"},");

            sb.append("{\"id\":\"2\",\"name\":\"系统管理\",\"pId\":\"0\"},");
            sb.append("{\"id\":\"103\",\"name\":\"权限组管理\",\"pId\":\"2\"},");
            sb.append("{\"id\":\"104\",\"name\":\"权限菜单管理\",\"pId\":\"2\"}");
            sb.append("]");
            return sb.toString();

2.后台处理要显示的数据

（1）最终的数据

（2）父节点实体类

（3）子节点实体类

（4）获取的父节点泛型的list

**其中红色线框中为第一层父节点下包含的子节点

***如上一层一层嵌套的权限树从数据库查询完成

（最后返回的数据实体类）

（***for循环list，找出第一父节点，然后在此循环中嵌套for循环遍历父节点中的第一子节点，然后递归调用一个方法，遍历所有子节点一直到没有子节点，然后统一放在List<SystemPermissionVo>这样的泛型list中，即上面那个最终的数据中的那个systemPermissionVos）

3.点击节点名称之后在对应的input中显示数据

zTreeOnclick这个里面是点击节点之后触发的事件

4.点击添加按钮——弹框显示要添加的内容并保存

addHoverDom（treeId,treeNode）

5.点击删除按钮——将数据库中对应数据删除

beforeRemove

6.加checkbox，在返回参数里面加一个open属性，true和false就是默认展开节点或者关闭

check: {

enable: true
},