筆者新建了一個QQ群：571278542 。歡迎大家加入！

上一篇文章中說了zTree樹外掛編寫過程。接來下，談談zTree樹外掛實現點選左側樹，右側展示文章列表頁面過程。

1. 效果展示
   

2.這裡就說說思路。

channel.jsp

<div class="pos-a" style="width:280px;left:0;top:0; bottom:0; height:100%; border-right:1px solid #e5e5e5; background-color:#f5f5f5">
    <ul id="channelTree" class
 
="ztree">
    </ul>
</div>

<iframe id="listChannel" Name="listChannel" frameborder=0  src=""
        scrolling=auto width=100%  height=900px ></iframe>

要想實現上面圖片中的效果，就是建立2個jsp頁面，channel.jsp和channelChild.jsp。

<iframe id="listChannel" Name="listChannel" frameborder=0  src
 
=""
        scrolling=auto width=100%  height=900px ></iframe>

就是上面channel.jsp中那段程式碼。點選左側樹，右側切換靠的就是channelChild.jsp子頁面。
那麼怎麼實現？原理就是點選左側樹的時候，傳遞url地址給iframe 中src即可(至於iframe 標籤 的用法大家可以去查一下)。這樣就要依賴jquery來實現了。
以下zTree.js外掛中，我已經寫上去了。大家可以參考來寫。

/* 外掛樹：傳入setting原型擴充套件方法 */
var zTreeObj = null
 
;//
(function($) {
    $.fn.mytree = function(opts) {
        var setting = $.extend({
                view: {
                    selectedMulti: false,
                    dblClickExpand:true
                },

                async: {
                    enable: true,
                    type:"GET",
                    //如果請求到的值是null, 應該如何提示 代表當前路徑：$("#ctx")
                    url: opts?(opts.url||"ajaxchannel"):"ajaxchannel"
                },
                **mine: {
                    listChild:1,
                    srcElement:"#listChannel"
                }**,
                callback: {
                    onAsyncSuccess: function zTreeOnAsyncSuccess()
                    {
                        zTreeObj.expandAll(true);
                    },
                },

                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                        rootPId: -1,
                    },
                    key:{
                        name:"title"
                    }
                }
        },opts||{});
        var _mine = setting.mine;
        zTreeObj = $.fn.zTree.init($(this), setting);
        zTreeObj.getCheckParentNodes = getCheckParentNodes;
        zTreeObj.getCheckChildNodes = getCheckChildNodes;
        if(_mine.listChild) {
            zTreeObj.setting.callback.onClick = listChild;
        }

        /**
         * 回撥函式
         */
        function zTreeOnAsyncSuccess()
        {
            // tips no data TODO
            zTreeObj.expandAll(true);
        }

        /**
         * 點選任意欄目，列出他的所有子欄目
         */
        **function listChild(event,treeId,treeNode){
            $(_mine.srcElement).attr("src","channel/"+treeNode.id);
        }**

        function getCheckParentNodes(treeNode,checked) {
            var ps = new Array();
            var pn;
            while((pn=treeNode.getParentNode())) {
                if(pn.checked==checked) ps.push(pn);
                treeNode = pn;
            }
            return ps;
        }

        //第三個引數儲存所有子節點
        function getCheckChildNodes(treeNode,checked,cs) {
            var ccs;
            if((ccs=treeNode.children)) {
                for(var i=0;i<ccs.length;i++) {
                    var c = ccs[i];
                    if(c.checked==checked) {
                        cs.push(c);
                    }
                    getCheckChildNodes(c,checked,cs);
                }
            }
        }

        return zTreeObj;
    };
})(jQuery);

程式碼就是上面的：

mine: {
    listChild:1,
    srcElement:"#listChannel"
}

if(_mine.listChild) {
    zTreeObj.setting.callback.onClick = listChild;
}

/**
* 點選任意欄目，列出他的所有子欄目
 */
function listChild(event,treeId,treeNode){
    $(_mine.srcElement).attr("src","channel/"+treeNode.id);
}