梅花雪树控件2.0的例子

下面是梅花雪树空间2.0的例子。
2.0的功能有了很大的改进，加入了动态加载，可以使用xml，js，一个数组等来作为数据源，在节点中还加入了checkbox。
下面看看用xml,和js来作为数据源的。
myxml.xml文档：

   
   
       
   
   
   

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部分：

       

梅花雪树的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   setTimeout(function(){me.afterRender();}, 10);
  return "     "οnclick='Instance(/""+ this.index +"/").clickHandle(event)' "+
    "οndblclick='Instance(/""+ this.index +"/").dblClickHandle(event)' "+
    "on_contextmenu='Instance(/""+ this.index +"/").contextMenuHandle(event)' "+//这里是我们添加的右键事件
    ">"+ str +"";
};

然后我们还得多写个方法。

//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"));
  }
};

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！