说一下,目前我发现最强大的一棵树形菜单还算 zTee
主页地址为:http://www.baby666.cn/v3/main.php#_zTreeInfo
我研究 treeview(b/s结构) 的时间加起来,应该有一个月以上了。在传统的webfrom开发中,我把微软自带的treeview真的是玩转了。但是最近遇上了麻烦事,有一个新项目,是用微软的mvc3做的,微软的MVC3不能用服务器控件,我彻底的崩了。
在网上查了两个半天的资料,先从中文网页,查到外文网页,换了不同的关键字(mvc treeview,mvc tree,mvc 树,jquery treeview,jquery tree, jquery 树,js treeview,js tree, js 树,ext treeview,mootools树,telerik 树.......)都没有找到一个合适的树。
主要偿试了一下,下边几种树:
1:dtree:这是我06年的时候用的不亦乐乎的一棵树,就因为这棵对,我爱上了b/s结构的开发。但是不能实现异步加载。
2:jquery ui 官网的:http://jquery.bassistance.de/treeview/demo/ 这棵树真的太简单了,简单的来我花两天都有可能写的出来。demo都只有5个例子。
3:ext树,这个树不得不赞一下,比较强,但是我不可能为了用一棵对,引入几个超大的js文件。
4:这时想到了mootools,因为mootools的UI都比较炫。后来考虑不合适,因为现在用mootools框架的人比较少了。
5:因为我以前做过近两年的telerik的开发,想到了在webform下,telerik的 treeview是天下无敌,想到了telerik的mvc版,去官网一看,是一个半成品,就连勾选了父结点,连子结点都连不中的树。还要收费。
6:既然都想到了telerik,肯定还要看一下CONE,唉,大同小意。
这下绝望了。
我都不想用mvc了,想实现一棵树,就这么难。但是我又想用 mvc 的razor, 还有mvc表单验证。用起真是太爽了。
我在绝望中,继续翻着网页,找啊,找
找到了这一篇:http://www.cnblogs.com/xiaoyao2011/archive/2011/10/26/Tree.html
看到了这个例子:http://baby666.cn/hunter/zTree.html
看到是用汉语写的,心都凉了半截,国人怎么可能写的出好的树形控件呢,不过我看到这棵对的功能还挺多的,简介吹起
牛,基本是浏览器都兼容,呵呵,死马当活马医,先测试一下这棵树再说,
不测不知道,一测吓一条, 哈哈,兼容性还真好,ff, chrome,ie6, ie7,8,9都兼容,对于我来说已经足够了。功能能多,
扩展函数也多,好的,就选择用ztree了。
在用的时候,遇上的问题:
我要在项目中,想实现这种功能:
(图1)
先简单的介绍一下,我想实现的功能 :
1.左边树的节点非常的多,肯定会达到上万个结点,所以必须要实现异步加载。
2.每个节点有一个名称,还对应一个编码(名称和编码不能重复,所以在添加的时候要与数据库验证),还要有描述。
3.还要有对结点的CRUD操作(在右边操作的时候,对应操作数据库,左边的结点要实时反应出来)
就这么几个简单的功能,可是这个我认为目前是网络上流传的,世界上最强大的树,实现起来也有难度。
一:首先谈删除结点:我选中一个节点,在右边的表单中,显示出来,我点击删除按钮,表单值清空,左边结点树移除。
用这个控件提供的:removeNode / removeChilds 函数来实现,完全没问题。
二:再谈修改:editName(),官方提供的这个函数就有问题了。
当调用这个函数时,出现了如下图的情况:
(图2)
这个修改,就比较扯淡了,我没有办法难证这个结点值的有效性,比如名字太长了,或者数据库里有这个名字了。
后来没办法,发了这个dtree提供了一个
(图3)
updateNode()函数,我就在这个函数里做文章了
(
a.选中节点的时候,把节点的值,读取到右图1的表单中;
b.改变表单的值后,点击修改按钮,把值更新到数据库;
c如果数据库更新成功了再更新树的结点
)
三:查看结点。是没有问题的,选中结点,把结点的ID取到,再到数据库读出结点的其它信息,显示到表单中。
四:新增结点就有问题了。
因为我这棵对是实的异步加载:当我选中一个这样的结点
(图4)
我调用:addNodes ()函时,把图1右边表单的值收集起来,往数据库里添加一个结点的数据,同时在(父节点2)下添加一个节点,并且展开(父结点2)。问题就出在这儿了(描述:我父结点2下,原来是有结点的,但是我没有点击它,还没有异步加载进来,当我"父结点2"增加了一个结点,结点的个数应该是:我刚增加的结点 加上 我刚创建的结点。)问题就这个操作,会报错,报错也报的比较底层,我看了半天,也没发现怎么来修改这个错误。
呵呵!!
后来我用了变通的方法:
a.我新加一个结点时,我收集图1右边表单的数据,插入到数据库。
b.我用这个树的结点的异步加载函数:reAsyncChildNodes()
把当前结点的所有子结点重新加载一次. (这样就实了我刚才加载的结点,和原有的节点都同时显示出来了。)
到目前为止,在mvc3下,用treeview的问题终于解决了。
我写这篇日志的目的,我希望大家多转转一下,让写http://www.baby666.cn/v3/demo.php#_109p这个控件树的人看到我写的日志。
让zTree的作者继续修改和完善这个棵树,成为全球最强的js树。
my97_datepicker:这个控件是日历控件的标杆控件。
我也很希望: zTree是 treeview的标杆控件。
花了一个小时写这篇日志,太浪费时间了。哈哈