當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

梅花雪树控件的属性及方法

發(fā)布時(shí)間：2023/12/20 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了梅花雪树控件的属性及方法小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

【背景】

郵件地址簿選擇樹，使用梅花雪樹控件實(shí)現(xiàn)，但是沒有實(shí)現(xiàn)自動(dòng)展開到當(dāng)前用戶所在部門，嘗試很多種方式都無果，今天無意間發(fā)現(xiàn)梅花雪樹的屬性和方法介紹，故進(jìn)行收藏。

梅花雪樹1.0控件有以下屬性和方法。

屬性
MzTreeView 類的一些屬性：屬性名類型屬性的具體說明
MzTreeView.nodes 集合服務(wù)器端給樹指定數(shù)據(jù)源時(shí)數(shù)據(jù)存放的對(duì)象，具體存放格式如：
MzTreeViewHandle.nodes["parentId_nodeId"] = "text: nodeText; icon: nodeIcon; url: nodeURL; ...";
?
MzTreeView.url 地址字符串可讀寫，樹缺省的URL，默認(rèn)值是 #
MzTreeView.target 目標(biāo)框架名可讀寫，樹缺省的鏈接target，默認(rèn)值是 _self
MzTreeView.name 字符只讀，樹的實(shí)例名，同樹實(shí)例化時(shí)作為參數(shù)傳入(大小寫敏感)：
var Tree = new MzTreeView("Tree");
MzTreeView.currentNode 樹節(jié)點(diǎn) 只讀，樹當(dāng)前得到焦點(diǎn)的節(jié)點(diǎn)對(duì)象
MzTreeView.icons 集合樹所使用的所有圖標(biāo)存放
MzTreeView.iconsExpand 集合樹里展開狀態(tài)的圖標(biāo)存放
MzTreeView.colors 集合樹里使用到的幾個(gè)顏色存放

MzTreeView 在客戶端的節(jié)點(diǎn)所擁有的屬性：屬性名屬性的具體說明
node.id 數(shù)字文本，節(jié)點(diǎn)的ID
node.parentId 數(shù)字文本，節(jié)點(diǎn)對(duì)應(yīng)的父節(jié)點(diǎn)ID
node.text 文本，節(jié)點(diǎn)的顯示文本
node.hint 文本，節(jié)點(diǎn)的注釋說明
node.icon 文本，節(jié)點(diǎn)對(duì)應(yīng)的圖標(biāo)
node.path 文本，節(jié)點(diǎn)在樹里的絕對(duì)路徑：0_1_10_34
node.url 文本，該節(jié)點(diǎn)的 URL
node.target 文本，該節(jié)點(diǎn)鏈接的目標(biāo)框架名
node.data 文本，該節(jié)點(diǎn)所掛載的數(shù)據(jù)
node.method 文本，該節(jié)點(diǎn)的點(diǎn)擊對(duì)應(yīng)處理語句
node.parentNode 對(duì)象，節(jié)點(diǎn)的父節(jié)點(diǎn)對(duì)象
node.childNodes 數(shù)組，包含節(jié)點(diǎn)下所有子節(jié)點(diǎn)的數(shù)組
node.sourceIndex 文本，服務(wù)器給予的數(shù)據(jù)里對(duì)象的 parentId_nodeId 的組合字符串
node.hasChild 布爾值，指該節(jié)點(diǎn)是否有子節(jié)點(diǎn)
node.isLoad 布爾值，本節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)據(jù)是否已經(jīng)在客戶端初始化
node.isExpand 布爾值，節(jié)點(diǎn)的展開狀態(tài)

方法
MzTreeView 類的一些方法：方法名方法的具體說明
MzTreeView.toString() 類的默認(rèn)初始運(yùn)行
MzTreeView.buildNode(id) 將該節(jié)點(diǎn)的所有下級(jí)子節(jié)點(diǎn)轉(zhuǎn)換成 HTML 并在網(wǎng)頁(yè)上體現(xiàn)出來
MzTreeView.nodeToHTML(node, AtEnd) 將 node 轉(zhuǎn)換成 HTML
MzTreeView.load(id) 從數(shù)據(jù)源里加載當(dāng)前節(jié)點(diǎn)下的所有子節(jié)點(diǎn)
MzTreeView.nodeInit(sourceIndex, parentId) 節(jié)點(diǎn)的信息初始，從數(shù)據(jù)源到客戶端完整節(jié)點(diǎn)的轉(zhuǎn)化
MzTreeView.focus(id) 聚集到某個(gè)節(jié)點(diǎn)上
MzTreeView.expand(id[, sureExpand]) 展開節(jié)點(diǎn)（包含下級(jí)子節(jié)點(diǎn)數(shù)據(jù)的加載初始化）
MzTreeView.setIconPath(path) 給節(jié)點(diǎn)圖片設(shè)置正確的路徑
MzTreeView.nodeClick(id) 節(jié)點(diǎn)鏈接點(diǎn)擊時(shí)同時(shí)被觸發(fā)的點(diǎn)擊事件處理方法
MzTreeView.upperNode() 跳轉(zhuǎn)到當(dāng)前聚集節(jié)點(diǎn)的父級(jí)節(jié)點(diǎn)
MzTreeView.lowerNode() 跳轉(zhuǎn)到當(dāng)前聚集節(jié)點(diǎn)的子級(jí)節(jié)點(diǎn)
MzTreeView.pervNode() 跳轉(zhuǎn)到當(dāng)前聚集節(jié)點(diǎn)的上一節(jié)點(diǎn)
MzTreeView.nextNode() 跳轉(zhuǎn)到當(dāng)前聚集節(jié)點(diǎn)的下一節(jié)點(diǎn)
MzTreeView.expandAll() 展開所有的樹點(diǎn)，在總節(jié)點(diǎn)量大于500時(shí)這步操作將會(huì)比較耗時(shí)

//下面是用AJAX來實(shí)現(xiàn)的，這里是一次性加載所有數(shù)據(jù)，沒有實(shí)現(xiàn)異步加載。

var tree = new MzTreeView("tree");//創(chuàng)建一個(gè)樹的實(shí)例
function TheTree()
...{

? tree.icons["proj"] = "project.gif";
? tree.icons["book"]? = "book.gif";
? tree.iconsExpand["book"] = "bookopen.gif"; //設(shè)置圖片

? tree.setIconPath("image/");
?
? tree.nodes["0_1"] = "text:項(xiàng)目列表";//虛擬根目錄
?
? var DataSet = FinetWebCPM.TreeTest.GetProject().val;
?
? var rows = DataSet.Tables[0].Rows;
? for(i = 0 ;i < rows.length ; i++)
? ...{
?tree.nodes["1_"+rows[i].ProjID] = "text:"+rows[i].SCName;//nodes數(shù)組的下表的格式是[父節(jié)點(diǎn)id_子節(jié)點(diǎn)id]

?var DataSetPPage = FinetWebCPM.TreeTest.GetPage(rows[i].ProjID).val;
?if(DataSetPPage != null)
?...{
? var rowspage = DataSetPPage.Tables[0].Rows;
? if(rowspage.length > 0)
? ...{
?? for(n = 0 ;n < rowspage.length ; n++)
?? ...{
??? tree.nodes[rows[i].ProjID+"_"+rowspage[n].PageID] = "text:"+rowspage[n].PageTitle+";url:"+rowspage[n].PageUrl;
?? }
? }
? else
? ...{
?? tree.nodes[rows[i].ProjID+"_None"] = "text:無此項(xiàng)目頁(yè)面！";
? }
?}
?else
?...{
? tree.nodes[rows[i].ProjID+"_None"] = "text:無此項(xiàng)目頁(yè)面！";
?}
? }
? document.getElementById("treeviewarea").innerHTML = tree.toString();
}
?

下面是梅花雪樹空間2.0的例子。?

2.0的功能有了很大的改進(jìn)，加入了動(dòng)態(tài)加載，可以使用xml，js，一個(gè)數(shù)組等來作為數(shù)據(jù)源，在節(jié)點(diǎn)中還加入了checkbox。
下面看看用xml,和js來作為數(shù)據(jù)源的。

myxml.xml

<?xml version="1.0" encoding="utf-8"?>
<nodes>
??? <node id="100" url="/page/100.htm" text="100頁(yè)面" />
??? <node id="101" url='/page/101.htm' text="101頁(yè)面">
??????? <node text="child node" />
??? </node>
??? <node id="102" url='/page/102.htm' text="102頁(yè)面" />
??? <node id="103" url='/page/103.htm' text="103頁(yè)面" />
</nodes>

help.js

var data=...{};
data['3_301'] = 'text:ASP ; data:roomid=301';
data['3_35409'] = 'text:JSP ; data:roomid=5409';
data['3_303'] = 'text:PHP ; data:roomid=303';
js部分

?? <SCRIPT LANG GE="JavaScript">
??????? var data=...{};
??????? data["-1_1"] = "text: 起點(diǎn);";//nodes的下標(biāo)和1.0的格式是一樣的。
??????? data['1_9001'] = 'text: 首頁(yè);';
??????? data['1_9002'] = 'text: 介紹; XMLData: data/myxml.xml ';
??????? data['1_9009'] = 'text: 幫助; url:page/help?typenum=1&roomid=1 ; JSData: data/help.js ';//可以設(shè)置url的彈出方式target:_blank;,其默認(rèn)是_self。

var xmlstr='<nodes>'+
??????? '<node text="中國(guó)" />'+
??????? '<node text="江西" />'+
??????? '<node text="廣東">'+
??????????? '<node text="梅州" />'+
??????????? '<node text="深圳" />'+
??????? '</node>'+
??????? '<node text="河北" />'+
????? '</nodes>';

??????? Using("System.Web.UI.WebControls.MzTreeView");
??????? var tree = new MzTreeView();
??????? tree.dataSource = data
??????? tree.loadXmlDataString(xmlstr, 1);//xml字符串作為數(shù)據(jù)源,loadXmlDataString方法的第一個(gè)參數(shù)是xml字符串，第二個(gè)參數(shù)父節(jié)點(diǎn)ID
??????? tree.setJsDataPath("data/");//設(shè)置數(shù)據(jù)源的位置
??????? tree.setXmlDataPath("data/");
??????? tree.autoSort=false;
??????? tree.useCheckbox=tr;//是否使用checkbox
??????? tree.canOperate=tr;
??????? document.write(a.render());//輸出樹
??????? tree.expandLevel(1);//展開1節(jié)點(diǎn)
?</SCRIPT>

梅花雪樹的url默認(rèn)是#，如果你的樹很高，你單擊下面節(jié)點(diǎn)的時(shí)候會(huì)跳到頁(yè)面的頂層，你可以將url寫成url:javascript:return;這樣來屏蔽掉默認(rèn)的url，不過你設(shè)置成這樣還將target屬性是指成_blank的話，將會(huì)彈出一個(gè)新的窗口。
也許你要修改這些默認(rèn)設(shè)置的話，你可以修改\scripts\system\web\ui\webcontrols\mztreeview.js里面的代碼。如果你會(huì)英語及JS的話，應(yīng)該是很簡(jiǎn)單的。
梅花雪樹控件只有雙擊，和單擊事件，下面來為樹控件加各右鍵菜單事件，打開\scripts\system\web\ui\webcontrols\mztreeview.js，文件，找到render事件，這方法改成

MzTreeView.prototype.render = function()
...{
? function loadImg(C)...{for(var i in C)...{if("string"==typeof C[i])...{
? var a=new Image(); a.src=me.iconPath + C[i]; C[i]=a;}}} var me=this;
? loadImg(MzTreeView.icons.expand);loadImg(MzTreeView.icons.collapse);
? loadImg(MzTreeView.icons.line); me.firstNode=null;
? loadCssFile(this.iconPath +"mztreeview.css", "MzTreeView_CSS");

? this.initialize(); var str="no data", i, root=this.rootNode;
? if (root.hasChild)...{var a = [], c = root.childNodes; me.firstNode=c[0];
? for(i=0;i<c.length;i++)a[i]=c[i].render(i==c.length-1);str=a.join("");}
? setTimeout(function()...{me.afterRender();}, 10);
? return "<div class='mztreeview' id='MTV_root_"+ this.index +"' "+
??? "οnclick='Instance(""+ this.index +"").clickHandle(event)' "+
??? "οndblclick='Instance(""+ this.index +"").dblClickHandle(event)' "+
??? "οncοntextmenu='Instance(""+ this.index +"").contextMenuHandle(event)' "+//這里是我們添加的右鍵事件
??? ">"+ str +"</div>";
};
?

然后我們還得多寫個(gè)方法。

//private: contextMenuHandle
MzTreeView.prototype.contextMenuHandle = function(e)
...{
? e = window.event || e; e = e.srcElement || e.target;
? if((e.tagName=="A" || e.tagName=="IMG")&& e.id)
? ...{
??? e=this.nodes[e.id.s str(e.id.lastIndexOf("_") +1)];
??? //e是一個(gè)節(jié)點(diǎn)對(duì)象，如我這里是判斷這個(gè)節(jié)點(diǎn)是否有子節(jié)點(diǎn)，然后執(zhí)行相應(yīng)的方法 e.hasChild ? Tool(e,"project"):Tool(e,"page");
??? e.focus();
??? this.currentNode=e;this.dispatchEvent(new System.Event("oncontextmenu"));
? }
};

總結(jié)

以上是生活随笔為你收集整理的梅花雪树控件的属性及方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：小菜鸟初次接触JBoss应用服务器
下一篇： MXF crcf