笔者新建了一个QQ群:571278542 。欢迎大家加入!
上一篇文章中说了zTree树插件编写过程。接来下,谈谈zTree树插件实现点击左侧树,右侧展示文章列表页面过程。
- 效果展示
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);
}