ztree自动选中节点并滚动定位

场景需求:

ztree展示树状数据结构,后台传入一个节点信息,前端自动选中,如果树长度过长需要滚动到具体节点

问题点:

因为ztree自带api因为各种原因可能无法实现让节点自动滚到到可视区域内

ztree自动选中节点并滚动定位_第1张图片

解决方案关键点:

1、var currNode = treeObj.getNodeByParam("id", $("#fpdx_").val());//根据ID找到该节点

2、实现滚动和选择效果(两种方案

注意:divgzl 为ztree外部固定高度div的id

a)定位覆盖原来的selectNode方法:先选择后滚动

$("#" + currNode.tId + "_a").addClass("curSelectedNode");

$("#divgzl").animate({scrollTop:$("#"+currNode.tId).offset().top-300},1000);//1000是ms,也可以用slow代替

或者:

b)这里注意selectNode放后面执行:先滚动后选中

$("#divgzl").animate({scrollTop:$("#"+currNode.tId).offset().top-300},1000);//1000是ms,也可以用slow代替treeObj.selectNode(currNode);

直接上源码:

    $(function () {
        searchKhdx();
    });
    function searchKhdx(from){
        var treeID= "#pjjs_ysdy_gzl";
        var setting = {
            data : {
                simpleData : {
                    enable : true,
                    idKey : "id",//节点id
                    pIdKey : "parent",//父节点id
                },
            },
            view:{
                showLine:false,// 是否显示节点之间的连线
            },
            callback : {//回调函数
                beforeClick: beforeClick,
                onClick : onClick,// 节点被点击时调用
                onAsyncSuccess: zTreeOnAsyncSuccess,// 异步加载正常结束的事件回调函数
            },
            async:{
                autoParam:["parent"],
                enable:true,
                type:"post",
                url:basePath+'jxfp/ajaxSearchKhdx?jjfpid='+$("#jjfpid_").val()+'&ztbm='+$("#ztbm_").val()+'&ztjc='+$("#ztjc_").val(),
            }
        };
        $.fn.zTree.init($("#pjjs_ysdy_gzl"), setting);
    }
    function beforeClick(treeId, treeNode, clickFlag) {
        if(!treeNode.isParent){
            return true;
        }
        alertMsg("请选择具体人员");
        return false;
    };
    
    function onClick(event, treeId, treeNode, clickFlag) {
        var id = treeNode.id;// 树id
        var treename = treeNode.name;// 树名称.可以在需要的时候加
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var nodes = treeObj.getSelectedNodes();//
        if (nodes.length > 0) {
            sesrchZbsj(nodes[0].id, '2');//单击事件
            // treeObj.reAsyncChildNodes(nodes[0], "refresh");// 刷新节点
        }
    }
    
    //用于捕获异步加载正常结束的事件回调函数
    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var nodes = treeObj.getNodes();
        var currNode = treeObj.getNodeByParam("id", $("#fpdx_").val());//根据ID找到该节点
        treeObj.expandAll(true);//
        sesrchZbsj($("#fpdx_").val(), '2');//单击事件
        // treeObj.selectNode(currNode);
        // $("#" + currNode.tId + "_a").addClass("curSelectedNode");//修复定位滚动BUG
        $("#divgzl").animate({scrollTop:$("#"+currNode.tId).offset().top-300},1000);//1000是ms,也可以用slow代替
        treeObj.selectNode(currNode);//根据该节点选中
        // debugger;
        // var offsetTop = $('#'+ currNode.tId ).position().top;
        // $('#divgzl').scrollTop(900);
    }

    你可能感兴趣的:(JAVA,WEB菜鸟,javascript,css,jquery)