最近在用那個(gè)dtree做個(gè)樹形菜單采用的jquery+ajax+dtree+struts2的結(jié)構(gòu),下面是我的做法:
大部分地方比較順利,先分享一下我的做法,再提個(gè)問題。
利用struts2中json的插件,返回菜單表的json數(shù)據(jù),再利用dtree將菜單表展現(xiàn)出來:
下面是ajax及構(gòu)造dtree的js文件,因?yàn)閐tree中的圖片是路徑是默認(rèn)的所以我改成下面的這種
function dTree(objName,sImgPath) {
this.config = {
target : null,
folderLinks : true,
useSelection : true,
useCookies : true,
useLines : true,
useIcons : true,
useStatusText : false,
closeSameLevel : false,
inOrder : false
}
this.icon = {
root : sImgPath+'base.gif',
folder : sImgPath+'folder.gif',
folderOpen : sImgPath+'folderopen.gif',
node : sImgPath+'page.gif',
empty : sImgPath+'empty.gif',
line : sImgPath+'line.gif',
join : sImgPath+'join.gif',
joinBottom : sImgPath+'joinbottom.gif',
plus : sImgPath+'plus.gif',
plusBottom : sImgPath+'plusbottom.gif',
minus : sImgPath+'minus.gif',
minusBottom : sImgPath+'minusbottom.gif',
nlPlus : sImgPath+'nolines_plus.gif',
nlMinus : sImgPath+'nolines_minus.gif'
};
this.obj = objName;
this.aNodes = [];
this.aIndent = [];
this.root = new Node(-1);
this.selectedNode = null;
this.selectedFound = false;
this.completed = false;
};
這樣在new時(shí)就可以把圖片的路徑加進(jìn)去,這也是根據(jù)網(wǎng)上的個(gè)朋友的做法改寫的,我的jquery的代碼是單獨(dú)放到一個(gè)文件中去的。如下所示
$(document).ready(function(){
var wscmtree = new dTree("tree","main/pic/");
var url = "createmenu.action";
var m_username=encodeURIComponent("");
var params = {username:m_username};
jQuery.post(url, params, callbackFun, "json");
function callbackFun(data)
{
var list = data.list;
for(var i=0;i<list.length;i++)
{
var menuid = list[i].menuid;
var parentid = list[i].parentid;
var menuname = "";
if (list[i].menuname==null)
{menuname=""}else{menuname = trim(list[i].menuname)}
var url = "";
if (list[i].url==null)
{url=""}else{url = trim(list[i].url)}
var title = "";
var target = "";
var icon = "";
var iconopen = "";
var open = false;
wscmtree.add(menuid, parentid, menuname,url,title,target,icon,iconopen,open);
}
$("body").append(wscmtree.toString());
$("#test").attr("value",wscmtree.toString());
}
$("#openall").click(function(){
wscmtree.openAll();
}
);
$("#closeall").click(function(){
wscmtree.closeAll();
}
);
function trim(str)
{
return str.replace(/^\s+/, ' ').replace(/\s+$/, ' ');
}
})
現(xiàn)在的問題是我的樹形菜單可以完全展示出來沒有問題了,點(diǎn)擊那個(gè)openall與closeall按鈕時(shí)正常。現(xiàn)在有一個(gè)問題,我點(diǎn)擊那個(gè)+或-號(hào)時(shí)不會(huì)出現(xiàn)任何反應(yīng)是什么問題?頁面左下角提示那個(gè)javascript是錯(cuò)誤的。javascript:tree.0(1),括號(hào)中的數(shù)字是結(jié)點(diǎn)的ID
posted on 2010-06-02 15:42
大灰狼 閱讀(1581)
評(píng)論(3) 編輯 收藏