场景需求:
ztree展示树状数据结构,后台传入一个节点信息,前端自动选中,如果树长度过长需要滚动到具体节点
问题点:
因为ztree自带api因为各种原因可能无法实现让节点自动滚到到可视区域内
解决方案关键点:
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);
直接上源码:
<div id ="divgzl" class="box-body" style="height:300px;overflow: auto;">
<div style="border: 0px;">
<ul id="pjjs_ysdy_gzl" class="ztree"></ul>
</div>
</div>
$(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);
}