Jquery中Ztree详解

 

 

前言：

忙中偷闲，继续补博客！嘻嘻！不吐槽了！

进入正题：

树形结构所需的dll文件：https://download.csdn.net/download/greycastle/11688919（复选框必用！！）

这个jquery中的Ztree树我第一次做这样的需求，让我头疼好久！下面就讲解下在项目中学习到知识吧！

树得基本的知识点就在下面的代码里（大家可以看下，因为实在不想写了，见谅，哈哈）

Ztree树什么是树：直接上图比较直观！（左侧是展开的树，右侧是折叠的树，下面的图是显示对节点进行编辑，新增和删除）

下面讲解关于树的知识点：（上代码更直观，第一个代码块是树的属性以及树结构的设置，第二个代码块是树的函数）

//树的属性设置
var setting = {
        view: {//不显示文件夹图标的函数
            showIcon: showIconForTree
        },
        //增删改，移动复制
        edit: {
            // enable: true, //如果enable为flase，那么树就不能移动了
            // showRemoveBtn: true, //是否显示树的删除按钮
            // showRenameBtn: true, //是否显示数的重命名按钮
            // isSimpleData: true, //数据是否采用简单 Array 格式，默认false
            treeNodeKey: "orgId",  //在isSimpleData格式下，当前节点id属性,根据需要自己更改
            treeNodeParentKey: "parentId",//在isSimpleData格式下，当前节点的父节点id属性，根据需要自己更改
            // showLine: true, //是否显示节点间的连线
            removeTitle: "删除节点",//删除Logo的提示
            renameTitle: "编辑节点",//修改Logo的提示
        },
        data: {
            simpleData: {
                enable: true,//如果为true，可以直接把从数据库中得到的List集合自动转换为Array格式。而不必转换为json传递
                idKey: "orgId",//节点的id，可以自己根据需要自己更改
                pIdKey: "parentId",//节点的父节点id，可以根据需要自己更改
                rootPId: null
            },
            key: {
                name: "orgName" //节点显示的值
            },
        },
        callback: {
            onClick: onClick,//左点击触发的函数
            onRightClick: onRightClick,//右击触发的函数
        }
    };

//是否显示文件夹的函数
function showIconForTree(treeId, treeNode) {
    return !treeNode.isParent;
}
//鼠标点击节点的函数
function onClick(event, treeId, treeNode) {
    //当node里具有url的时候，阻止跳转
    event.preventDefault();//阻止页面跳转
    selectMenu = treeNode;
    //console.log(treeNode.orgId);//节点id
    treeOrgId=treeNode.orgId;
    //treeOrgId=treeNode.parentId;
}
// 在ztree上的右击事件
function onRightClick(event, treeId, treeNode) {
    if (treeNode && !treeNode.noR) {
        $.fn.zTree.getZTreeObj("treeDemo").selectNode(treeNode);
        //console.log(event.pageY);
        //showRMenu("node", event.pageX+20, event.pageY -     
       $("#treeMenu").offset().top+10);
        selectMenu = treeNode;
        //console.log(treeNode.isParent);//判断该节点是不是父节点为bool类型
        treeOrgId=treeNode.orgId;
        //treeOrgId=treeNode.parentId;
    }
}
//鼠标按下事件
function onBodyMouseDown(event) {
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
        $("#rMenu").css({ "visibility": "hidden" });
    }
}


//显示右键菜单
function showRMenu(type, x, y) {
    //$("#rMenu ul").show();
    $("#rMenu").css({ "top": y + "px", "left": x + "px", "visibility": "visible" }); //设置右键菜单的位置、可见
    $("body").bind("mousedown", onBodyMouseDown);
}
//隐藏右键菜单
function hideRMenu() {
    if ($("#rMenu")) $("#rMenu").css({ "visibility": "hidden" }); //设置右键菜单不可见
    $("body").unbind("mousedown", onBodyMouseDown);
}

                //进行渲染树页面：treeDemo树的名称
                $.fn.zTree.init($("#treeDemo"), setting, msg.data);
                treeMenu=$.fn.zTree.getZTreeObj("treeDemo");
                treeMenu.expandAll(true);//将全部节点展开
                //var treeFirstId=treeMenu.getSelectedNodes();//获取选中树节点的id
                //拿到树中的第一个id,渲染表(treeDemo_1:树的第一个节点的id)
                //treeOrgId=treeMenu.getNodeByTId("treeDemo_1").orgId;
                treeOrgId=treeMenu.getNodeByTId("treeDemo_1").orgId;

结尾：

分享：老子说过，不努力，现在连土都吃不起。