梅花雪树控件1.0，2.0的使用

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MzTree.aspx.cs" Inherits="MzTree" %>

public string LoadTree()
    {
        string sql = "SELECT Parent,ID, Name FROM [T_Tree] ";
        SqlDataAdapter da = new SqlDataAdapter(sql, "DATABASE=aa;SERVER=localhost;UID=sa;PWD=sa;");
        DataTable dt = new DataTable();
        da.Fill(dt);
        string nodes = "";
        nodes = "var data = {};";

        foreach(DataRow dr in dt.Rows)
        {

                nodes += "data[\'" + dr["Parent"].ToString() + "_" + dr["ID"].ToString() + "\'] = \'text:" + dr["Name"].ToString() + ";\';\r\n";

        }
        nodes += "Using(\"System.Web.UI.WebControls.MzTreeView\");";
        nodes += "var a = new MzTreeView();";
        nodes += "a.dataSource = data;";
        nodes += "a.setJsDataPath(\"csdn/community/treedata/\");";
        nodes += "a.setXmlDataPath(\"csdn/community/treedata/\");";
        //a.rootId="1";
        nodes += "a.autoSort=false;";
        nodes += "a.useCheckbox=true;";
        nodes += "a.canOperate = true;";
        nodes += "document.write(a.render());";
        nodes += "a.expandLevel(1);";
        return nodes;
    }

【摘要】

梅花雪树控件1.0，2.0的使用。

【全文】

梅花雪树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时这步操作将会比较耗时

下面是几个例子。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Tree._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 = "\r\n     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]

下面是梅花雪树空间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)' "+
    "οncοntextmenu='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"));
}
};

开发文档: http://www.meizz.com/Web/Article.asp?id=436
控件下载: http://www.meizz.com/Web/Download/MzTreeView10.rar
应用示例: http://www.meizz.com/Web/Demo/MzTreeView10.htm

字段名	字段的具体说明
id	节点ID（不可为0，可以是数字或字符）
parentId	本节点的父节点ID（若本节点已为根节点，此处填0）
text	节点的显示文本（一般不允许为空，不过有一种情况例外，即根节点，若根节点文本为空，这个根节点将不会在页面里显示）
hint	节点的说明注解
icon	节点的图标，MzTreeView 1.0允许每个节点拥有不同的图标（对应的名字在类里的icons和iconsExpand定义）
data	节点挂的数据，格式是 param=value¶m=value&... url里?后的那串字符串格式，
url	每个节点允许拥有不同的链接，它为空或者为#时，树里这个节点的链接，点击将无反应
target	每个节点的链接允许在不同的target里打开，为空时取类里的默认值
method	点击该链接时所想触发的脚本语句

字段名

字段的具体说明

节点ID（不可为0，可以是数字或字符）

parentId

本节点的父节点ID（若本节点已为根节点，此处填0）

text

节点的显示文本（一般不允许为空，不过有一种情况例外，即根节点，若根节点文本为空，这个根节点将不会在页面里显示）

hint

节点的说明注解

icon

节点的图标，MzTreeView 1.0允许每个节点拥有不同的图标（对应的名字在类里的icons和iconsExpand定义）

data

节点挂的数据，格式是 param=value¶m=value&... url里?后的那串字符串格式，

url

每个节点允许拥有不同的链接，它为空或者为#时，树里这个节点的链接，点击将无反应

target

每个节点的链接允许在不同的target里打开，为空时取类里的默认值

method

点击该链接时所想触发的脚本语句