Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案
相关插件版本:
jquery.ztree.exedit-3.4.js
jquery.ztree.all-3.4.js
jquery-1.8.0.js
function onAsyncSuccess(event, treeId, treeNode, msg) {
curAsyncCount--;
if (curStatus == "expand") {
expandNodes(treeNode.children);
} else if (curStatus == "async") {
asyncNodes(treeNode.children);
}
if (curAsyncCount <= 0) {
curStatus = "";
// 节点定位
if(devicesSelect.selectNodeId){
// 节点变成被选中状态
var zTree = $.fn.zTree.getZTreeObj(zTreeId);
zTree.cancelSelectedNode();
$("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");
$("#treeDiv1").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-300},1000);//1000是ms,也可以用slow代替
devicesSelect.selectNodeId = "";
}
}
}
function expandNodes(nodes) {
if (!nodes) return;
curStatus = "expand";
var zTree = $.fn.zTree.getZTreeObj(zTreeId);
for (var i=0, l=nodes.length; i<l; i++) {
if(ids.indexOf(nodes[i].id) != -1){
if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id)) {
if(nodes[i].typeName.indexOf("虚拟")=="-1"){
zTree.expandNode(nodes[i], true, false, false);
} else if(nodes[i].type.indexOf(type)>"-1"){
zTree.expandNode(nodes[i], true, false, false);
}
} else {
goAsync = true;
}
}
}
if(goAsync==true){
var id_ = ids.substring(0,ids.indexOf(","));
var node = zTree.getNodeByParam("id",id_);
goAsync = false;
me.curStatus = "";
me.type = "";
me.selectNodeId = node.tId;
}
}
定位思路:
1、假设要定位节点A,该节点A的唯一标识是objid
2、根据objid从db中获取所有上级的objid,拼接并保存在ids变量。
3、在onAsyncSuccess方法中调用expandNodes,该方法中通过[if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id))]过滤,展开id在ids里的节点。
4、通常情况看下,在展开最后,依据objid通过【var node = zTree.getNodeByParam("id",id_);】获取节点A对象,然后通过【zTree.selectNode(node);】选择节点。
这种情况下,能够定位并选择目标节点,但是,当与该节点有同一父节点的数据较多时,节点A可能不会出现在可视区域内。查找源码,发现Ztree用的是【$("#" + node.tId).focus().blur();】方法实现定位。但很遗憾,有BUG。
于是,使用控制滚动条的方式自己控制定位。实现方式如下:
1、删除【zTree.selectNode(node);】,防止定位冲突
2、在onAsyncSuccess方法中,判定当节点展开完毕后,获取节点A的偏移量,并将值赋给树所在DIV的scrollTop属性。
$("#treeDiv1").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-300},1000);//1000是ms,也可以用slow代替
注:devicesSelect.selectNodeId为节点A的节点tid,通过【me.selectNodeId = node.tId】获取;treeDiv1树所在div的id属性
3、取消之前选中节点:zTree.cancelSelectedNode();
4、为节点A增加被选中状态class:$("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");
笔者淡淡的说:第2点我本来想用【$("#treeDiv1").scrollTop($("#"+devicesSelect.selectNodeId).offset().top-200);】这种方式的,虽然有效,但是同层节点过多时候,还是不能进入可视区域,我深深的怀疑是因为这个时候树还没展开,所以我就用了动画,无赖之举。
笔者最后的话:如果本文有任何错误,敬请看官火辣指出,不胜感激涕零。。。。
Ztree插件,定位节点时(focus)不能进入可视区域BUG解决方案的更多相关文章
- ztree获取选中节点时不能进入可视区域出现BUG如何解决
zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进 ...
- bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案
前言 最近在使用bootstrap的popover插件,效果如下: popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层. 但是在mac下的Safa ...
- zTree重命名节点时,操作的那个dom(类似input框那个)怎么写
<script type="text/javascript"> //tree的编辑节点的方法 ztree.editName(nodeNew[0]); /// $(&qu ...
- input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...
- vue input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获 ...
- Jstree 使用CheckBox插件 选中父节点时被禁用的子节点也会选中问题
问题描述: 最近用jstree遇到一个问题,使用CheckBox插件时,当父节点选中时,被禁用的子节点也会选中如下 解决方案: 1. 将jstree升级到最新的版本,v3.3.4及以上就可以 2. ...
- JQuery/JS插件 jsTree加载树,预先加载,初始化时加载前三级节点,当展开第三级节点时 就加载该节点下的所有子节点
jsTree加载树, 初始化时 加载前三级节点, 当展开第三级节点时 就加载该节点下的所有子节点 html: <!DOCTYPE html> <html> <head&g ...
- ztree 获取CheckBox选中节点时,不获取选中上级父节点
//将第三个参数改为false,表示不去勾选父节点下的所有子节点 zTreeObj.checkNode(node, true, false); setting.check.chkboxType = { ...
- ztree插件的使用
在bootstrap中使用ztree插件做树形架构,由于觉得原始的树形不够美观,所以改了其中的css插件 demo演示,以及各种属性的用法网站: http://www.treejs.cn/v3/de ...
随机推荐
- ActionContext和ServletActionContext区别
1. ActionContext 在Struts2开发中,除了将请求参数自动设置到Action的字段中,我们往往也需要在Action里直接获取请求(Request)或会话(Session)的一些信息, ...
- 设置surfaceView的背景为透明
1. [代码][Java]代码 下面三句话加上就好了. surfaceView.setZOrderOnTop(true); surfaceView.setEGLConfigChooser(, , ...
- Get,Post请求中文乱码问题有效解决方法
本文主要介绍如何有效解决web请求中的乱码问题,其实解决方法有很多种,不同的请求类型解决方法也不相同. 本文只介绍最方便的一种: 1.先修改jsp中的编码方式 2.针对Post方式提交的请求如果出现乱 ...
- java 四舍五入保留小数
// 方式一: double f = 3.1516; BigDecimal b = new BigDecimal(f); double f1 = b.setScale(2, BigDecimal.RO ...
- 2016暑假多校联合---Joint Stacks (STL)
HDU 5818 Problem Description A stack is a data structure in which all insertions and deletions of e ...
- android 去掉标题
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FUL ...
- Lucene.net站内搜索—6、站内搜索第二版
目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...
- Tomcat性能调优方案
一.操作系统调优 对于操作系统优化来说,是尽可能的增大可使用的内存容量.提高CPU的频率,保证文件系统的读写速率等.经过压力测试验证,在并发连接很多的情况下,CPU的处理能力越强,系统运行速度越快.. ...
- 商业银行在CNAPS体系中对各种交易的处理
简单来讲,商业银行在CNAPS体系中, 一)行内的交易 由各个银行的行内业务系统来自行解决信息流和资金流问题: 二)跨行的交易分渠道处理 柜台和网银等渠道,商业银行直接直连央行的大小额以及超级网银来解 ...
- ajax传参到实体类对应字段
之前看公司的代码,从页面ajax传参数到接口类,接口类用一个实体接收.我一直以为c#会自动识别,赋值到同名的字段. 我曾和朋友讨论过,双方辩论.朋友认为c#没有这种功能,没有这样高级匹配的机制.而我因 ...