梅花雪树控件的使用

梅花雪树1.0控件 有以下属性和方法。

属性
MzTreeView 类的一些属性： 属性名 类型 属性的具体说明
MzTreeView.nodes 集合 服务器端给树指定数据源时数据存放的对象，具体存放格式如：
MzTreeViewHandle.nodes["parentId_nodeId"] = "text: nodeText; icon: nodeIcon; url: nodeURL; ...";
 
MzTreeView.url 地址字符串 可读写，树缺省的URL，默认值是 #
MzTreeView.target 目标框架名 可读写，树缺省的链接target，默认值是 _self
MzTreeView.name 字符 只读，树的实例名，同树实例化时作为参数传入(大小写敏感)：
var Tree = new MzTreeView("Tree");
MzTreeView.currentNode 树节点 只读，树当前得到焦点的节点对象
MzTreeView.icons 集合 树所使用的所有图标存放
MzTreeView.iconsExpand 集合 树里展开状态的图标存放
MzTreeView.colors 集合 树里使用到的几个颜色存放

MzTreeView 在客户端的节点所拥有的属性： 属性名 属性的具体说明
node.id 数字文本，节点的ID
node.parentId 数字文本，节点对应的父节点ID
node.text 文本，节点的显示文本
node.hint 文本，节点的注释说明
node.icon 文本，节点对应的图标
node.path 文本，节点在树里的绝对路径：0_1_10_34
node.url 文本，该节点的 URL
node.target 文本，该节点链接的目标框架名
node.data 文本，该节点所挂载的数据
node.method 文本，该节点的点击对应处理语句
node.parentNode 对象，节点的父节点对象
node.childNodes 数组，包含节点下所有子节点的数组
node.sourceIndex 文本，服务器给予的数据里对象的 parentId_nodeId 的组合字符串
node.hasChild 布尔值，指该节点是否有子节点
node.isLoad 布尔值，本节点的子节点数据是否已经在客户端初始化
node.isExpand 布尔值，节点的展开状态

方法
MzTreeView 类的一些方法： 方法名 方法的具体说明
MzTreeView.toString() 类的默认初始运行
MzTreeView.buildNode(id) 将该节点的所有下级子节点转换成 HTML 并在网页上体现出来
MzTreeView.nodeToHTML(node, AtEnd) 将 node 转换成 HTML
MzTreeView.load(id) 从数据源里加载当前节点下的所有子节点
MzTreeView.nodeInit(sourceIndex, parentId) 节点的信息初始，从数据源到客户端完整节点的转化
MzTreeView.focus(id) 聚集到某个节点上
MzTreeView.expand(id[, sureExpand]) 展开节点（包含下级子节点数据的加载初始化）
MzTreeView.setIconPath(path) 给节点图片设置正确的路径
MzTreeView.nodeClick(id) 节点链接点击时同时被触发的点击事件处理方法
MzTreeView.upperNode() 跳转到当前聚集节点的父级节点
MzTreeView.lowerNode() 跳转到当前聚集节点的子级节点
MzTreeView.pervNode() 跳转到当前聚集节点的上一节点
MzTreeView.nextNode() 跳转到当前聚集节点的下一节点
MzTreeView.expandAll() 展开所有的树点，在总节点量大于500时这步操作将会比较耗时

 

下面是几个例子。

Default.aspx

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Default.aspx.cs "  Inherits = " Tree._Default "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title > 目录树 </ title >
     < script type = " text/javascript "  language = " javascript "  src = " MzTreeView10.js " ></ script >
     < link href = " css/Global.css "  type = " text/css "  rel = " stylesheet " />
     < style type = " text/css " >
        A.MzTreeview
         ... {
            font-size: 9pt;
            padding-left: 3px;
        }
     </ style >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < script type = " text/javascript "  language = " javascript " >
     <!--
        window.tree  =   new  MzTreeView( " tree " );

        tree.icons[ " property " ]  =   " property.gif " ;
        tree.icons[ " css " ]  =   " collection.gif " ;
        tree.icons[ " book " ]   =   " book.gif " ;
        tree.iconsExpand[ " book " ]  =   " bookopen.gif " ;
        tree.setIconPath( " /images/ " );
         <%  LoadTree();  %>
        tree.focus( 4945 );
        tree.setURL( " # " );
        tree.setTarget( "" );
        document.write(tree.toString());
     -->
     </ script >
     </ form >
</ body >
</ html >

后台页面：

_Default

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  System.Data.Sql;
using  System.Data.SqlClient;
using  TreeDemo.DBUtility;

namespace  Tree
... {
    public partial class _Default : System.Web.UI.Page
    ...{
        public static string str;

        protected void Page_Load(object sender, EventArgs e)
        ...{

        }

        public void LoadTree()
        ...{         
            string sql = "Select SiteID,isnull(PID,0) as PID,SiteCaption From AreaSite order by SiteID";
            SqlDataReader dr = TreeDemo.DBUtility.SqlHelper.ExecuteReader(SqlHelper.ConnectionString,CommandType.Text, sql, null);
            string node = "";
            while(dr.Read())
            ...{
                node = "      tree.nodes[" + """ + dr["PID"].ToString() + "_" + dr["SiteID"].ToString() + """ + "] = ";
                node = node + """ + "text:" + dr["SiteCaption"].ToString() + ";" + """;
                Response.Write(node);
            }
            if (!dr.IsClosed)
                dr.Close();
        }
    }
}

//下面是用AJAX来实现的，这里是一次性加载所有数据，没有实现异步加载。

var  tree  =   new  MzTreeView( " tree " ); // 创建一个树的实例
function  TheTree()
... {

  tree.icons["proj"] = "project.gif";
  tree.icons["book"]  = "book.gif";
  tree.iconsExpand["book"] = "bookopen.gif"; //设置图片

  tree.setIconPath("image/");
 
  tree.nodes["0_1"] = "text:项目列表";//虚拟根目录
 
  var DataSet = FinetWebCPM.TreeTest.GetProject().value;
 
  var rows = DataSet.Tables[0].Rows;
  for(i = 0 ;i < rows.length ; i++)
  ...{
 tree.nodes["1_"+rows[i].ProjID] = "text:"+rows[i].SCName;//nodes数组的下表的格式是[父节点id_子节点id]

 var DataSetPPage = FinetWebCPM.TreeTest.GetPage(rows[i].ProjID).value;
 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:无此项目页面！";
  }
 }
 else
 ...{
  tree.nodes[rows[i].ProjID+"_None"] = "text:无此项目页面！";
 }
  }
  document.getElementById("treeviewarea").innerHTML = tree.toString();
}

 

 

下面是梅花雪树空间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 +"' "+
    "οnclick='Instance(""+ this.index +"").clickHandle(event)' "+
    "οndblclick='Instance(""+ this.index +"").dblClickHandle(event)' "+
    "οncοntextmenu='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"));
  }
} ;