ztree实现用友NC631中树的模糊查询及NC631的bug描述

第一部分:用友NC631的部门树模糊查询的bug

(此bug仅代表作者使用的这个版本的这套软件出现的问题,不代表所有NC6系列都有这样的问题)

测试环境为数据泵还原的demo,实际实施的环境经测试,问题一样。
分别经IE、UClient测试,均会出现如下错误信息:(截图为UClient环境)

根据搜索条件过滤后的树,直接修改后
一、树节点与表体input中的内容不一致。
二、而后的清空动作执行不完全。
三、最后清空按钮直接无法隐藏。

操作步骤如下:

1、搜索条件“办公室”ztree实现用友NC631中树的模糊查询及NC631的bug描述_第1张图片

2、点击 “办公室” 进行 “修改” → “保存” 后,表体与树节点信息不一致ztree实现用友NC631中树的模糊查询及NC631的bug描述_第2张图片

3、再次选中 “02办公室” 节点时,表体中的input值又显示为“办公室”ztree实现用友NC631中树的模糊查询及NC631的bug描述_第3张图片

4、点击 菜单栏“刷新”ztree实现用友NC631中树的模糊查询及NC631的bug描述_第4张图片

5、如果 第4步不点 “刷新”,直接点搜索框内显示的 清空按钮 小叉叉,

a.正常逻辑应该清空input中的所有内容,再显示刚刚被隐藏的所有节点。

b.实际操作,input中的字符没有完全清空,且 清空按钮 小叉叉 仍然显示ztree实现用友NC631中树的模糊查询及NC631的bug描述_第5张图片

6、通过 对input焦点的进入和移出,清空按钮依旧存在,与搜索小图片并存。反复点击清空按钮除了样式变化,其他无反应。ztree实现用友NC631中树的模糊查询及NC631的bug描述_第6张图片ztree实现用友NC631中树的模糊查询及NC631的bug描述_第7张图片

7、此时的 清空按钮小叉叉是怎么点都不把自己隐藏起来 - -#

a.点击菜单栏的新增、复制、查询、刷新、过滤、多版本都不行。

b.“部门”tab 与其他 tab 切换 也不行。

消除方法:

1、再次在input中输入值后,点击 清空按钮小叉叉。

2、把“部门”tab 关闭后,重新打开。

第二部分:ztree实现用友NC631中树的模糊查询
后台使用 SSH,利用struts2的json插件传递json数据。
前台使用jquery+easyui+zTree等。

通过大量的查询,网络上关于zTree的模糊查询主要有三种方案:
1、通过api getNodesByParamFuzzy 得到nodelist,然后修改nodelist里面所有的节点的样式。
http://blog.csdn.net/wangjingna/article/details/50488921
2、通过apigetNodesByParamFuzzy 得到nodelist,直接显示到树容器中。
http://www.cnblogs.com/spring_wang/p/4112891.html
3、通过apigetNodesByFilter(3.X版本才有) 结合 indexOf(xxx)!=-1 的方案。
http://blog.csdn.net/danielpei1222/article/details/52078013
以上三种用户体验都不好。
第一种,虽然通过样式改变,保留了树结构本身的同时能让客户直接找到符合查询条件的节点。
但是,本身化繁为简的查询本质,却变成了化简为繁。如果树特别巨大,单纯的样式改变就变的特别累赘。让人看的特别费劲。
第二种,是另一个极端,只展示所需要的节点,而忽略了树本身特有的结构特性。
第三种,比较接近用友NC631的部门树模糊查询,但是其过滤条件比较简单,只要是父节点,利用indexOf(xxx)!=-1满足查询条件的就不隐藏,
这样就会让人觉得做事做了一半,如果树稍微复杂点,父节点稍微多点。那么这样的查询基本就可以忽略不计了。

通过反复测试,使用ztree3.5的getNodesByFilter是更好的方案。
下面上效果图:
1、 刚打开页面,默认选中根节点,展开根节点往下第一级子节点。 ztree实现用友NC631中树的模糊查询及NC631的bug描述_第8张图片
2、 输入查询条件“q”或“秦”或“虹”,我们要查的结果是“秦虹” ztree实现用友NC631中树的模糊查询及NC631的bug描述_第9张图片
ztree实现用友NC631中树的模糊查询及NC631的bug描述_第10张图片 ztree实现用友NC631中树的模糊查询及NC631的bug描述_第11张图片
3、 选中“秦虹”
  ztree实现用友NC631中树的模糊查询及NC631的bug描述_第12张图片
4、 点击“修改” 将名称改为 “秦虹_雅居乐”
ztree实现用友NC631中树的模糊查询及NC631的bug描述_第13张图片
5、点击“保存”
ztree实现用友NC631中树的模糊查询及NC631的bug描述_第14张图片
6、 整个修改过程,后台只执行一条sql,前台使用 api:updateNode即可。



js代码正在整理,后面会贴上来。

你可能感兴趣的:(JAVA)