zTree樹外掛實現點選左側樹,右側展示文章列表頁面實現思路
阿新 • • 發佈:2019-01-02
筆者新建了一個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);
}