梅花雪樹空間2.0的例子

下面是梅花雪樹空間2.0的例子。
2.0的功能有了很大的改進，加入了動態加載，可以使用xml，js，一個數組等來作爲數據源，在節點中還加入了checkbox。
下面看看用xml,和js來作爲數據源的。
myxml.xml文檔：

<?xml version="1.0" encoding="utf-8"?>
<nodes>
    <node id="100" url="/page/100.htm" text="100頁面" />
    <node id="101" url='/page/101.htm' text="101頁面">
        <node text="child node" />
    </node>
    <node id="102" url='/page/102.htm' text="102頁面" />
    <node id="103" url='/page/103.htm' text="103頁面" />
</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 LANGUAGE="JavaScript">
        var data={};
        data["-1_1"] = "text: 起點;";//nodes的下標和1.0的格式是一樣的。
        data['1_9001'] = 'text: 首頁;';
        data['1_9002'] = 'text: 介紹; XMLData: data/myxml.xml ';
        data['1_9009'] = 'text: 幫助; url:page/help?typenum=1&roomid=1 ; JSData: data/help.js ';//可以設置url的彈出方式target:_blank;,其默認是_self。

var xmlstr='<nodes>'+
        '<node text="中國" />'+
        '<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字符串作爲數據源,loadXmlDataString方法的第一個參數是xml字符串，第二個參數父節點ID
        tree.setJsDataPath("data/");//設置數據源的位置
        tree.setXmlDataPath("data/");
        tree.autoSort=false;
        tree.useCheckbox=true;//是否使用checkbox
        tree.canOperate=true;
        document.write(a.render());//輸出樹
        tree.expandLevel(1);//展開1節點
 </SCRIPT>

梅花雪樹的url默認是#，如果你的樹很高，你單擊下面節點的時候會跳到頁面的頂層，你可以將url寫成url:javascript:return;這樣來屏蔽掉默認的url，不過你設置成 這樣還將target屬性是指成_blank的話，將會彈出一個新的窗口。
也許你要修改這些默認設置的話，你可以修改/scripts/system/web/ui/webcontrols/mztreeview.js裏面的代碼。如果你會英語及JS的話，應該是很簡單的。
梅花雪樹控件只有雙擊，和單擊事件，下面來爲樹控件加各右鍵菜單事件，打開/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 +"' "+
    "onclick='Instance(/""+ this.index +"/").clickHandle(event)' "+
    "ondblclick='Instance(/""+ this.index +"/").dblClickHandle(event)' "+
    "oncontextmenu='Instance(/""+ this.index +"/").contextMenuHandle(event)' "+//這裏是我們添加的右鍵事件
    ">"+ str +"</div>";
};

然後我們還得多寫個方法。

//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.substr(e.id.lastIndexOf("_") +1)];
    //e是一個節點對象，如我這裏是判斷這個節點是否有子節點，然後執行相應的方法 e.hasChild ? Tool(e,"project"):Tool(e,"page");
    e.focus();
    this.currentNode=e;this.dispatchEvent(new System.Event("oncontextmenu"));
  }
};