JSF框架AOM3.0中替换树组件

最新推荐文章于 2013-04-27 14:03:10 发布

piperzero

最新推荐文章于 2013-04-27 14:03:10 发布

阅读量145

点赞数

文章标签： json ui javascript ViewUI

JSF框架AOM3.0中替换树组件

转载请注明出处

去年年初项目刚刚开始的时候，ie9还没有出现，所以一切似乎很和谐的。但是自从ie9出现以后，各种不兼容的问题来了。

时间组件在ie9上面显示一半，树结构的节点点不开。各种问题铺面而来。

虽然说点击ie9的兼容模式可以实现组件的兼容。但是目前来看许多用户还是计算机文盲，或者半文盲状态，所以他们只有很少一部分人知道点击兼容去尝试。

没办法，最后交项目的时候了，只能硬着头皮改了。。。

这个树的兼容完全是没有抓手被逼着弄的，不像datepicker有例子参照。

废话少说，下面让大家看看我的实现代码：

------------------------------------------------------我是华丽分割线--------------------------------------------------------------------

第一步：去http://www.baby666.cn下载ztree的框架

首先在页面加入如下js方法，目的是让树组件显示在页面上，并注册相应的函数。

<script type="text/javascript">
//<![CDATA[
var setting = {
data: {
key: {
title:"t"
},
simpleData: {
enable: true
}
},
callback: {
onMouseDown: onMouseDown
}
};

var jsonStr = '#{courseCategoryTreeBean.sessionToolsBean.treeAllCate}';
var obj2 = eval('(' + jsonStr + ')');
var zNodes = obj2;

var log, className = {down:"dark", up:"dark", right:"dark"};
function onMouseDown(event, treeId, treeNode) {
var chs = treeNode.children;
chs = chs +'';
cateIdZtree.setValue(treeNode?treeNode.id:null);
cateNamePathZtree.setValue(treeNode?treeNode.namePath:null);
cateIdPathZtree.setValue(treeNode?treeNode.idPath:null);
}
Ext.onReady(function(){
$.fn.zTree.init($(document.getElementById('treeDemo')), setting, zNodes);
});
//]]>

</script>

可以自行设置响应的方法，并需要自行编写json字符串。当然，在我看来，即使是自己编写json也比之前的写一个list传给AOM的ui要方便的多了。这个json串在例子里面有格式。你可以按照里面的格式来完成自己的json编写。

第二步：

将你所有填入树组件的地方替换成如下的table，当然，这里的table只是为了样式的修改。
<table>
<div class="content_wrap" style="height: 252px;width: 426px;margin: 0px;">
<div class="zTreeDemoBackground left" style="height: 252px;width: 426px;margin: 0px;">
<ul id="treeDemo" class="ztree" style="height: 242px;width: 426px;margin: 0px;"></ul>
</div>
</div>
</table>

第三步：

引入相应的js和css文件。这里的引入文件也在上面下载的html代码的头中有写明。

经过上面的步骤就完成了替换。

这里说一下整个流程。是首先在页面写了一个div组件，因为jqueryztree目前只能替换html标记的id组件，所以我们可以替换了这个div，但是这样就将之前写的方法全部丢失了，还好ztree里面有很多回填函数是可以使用的，而且在页面引入<ajax:>后也可以使用jsvar来传递参数，目前的我是这么做的。

这样，就彻底完成了整个流程