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

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来传递参数，目前的我是这么做的。

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