zTree树插件实现点击左侧树，右侧展示文章列表页面实现思路

笔者新建了一个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);
}

代码下载：https://download.csdn.net/download/u012759397/10434005