梅花雪树控件1020的使用.docx

梅花雪树控件1020的使用.docx

《梅花雪树控件1020的使用.docx》由会员分享，可在线阅读，更多相关《梅花雪树控件1020的使用.docx（30页珍藏版）》请在冰豆网上搜索。

梅花雪树控件1020的使用

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

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

   

    <%=LoadTree（） %>

<%--

window.tree=newMzTreeView（"tree"）;

//tree.setIconPath（"menutree/"）;//可用相对路径

<%=str%>//这里的str是在后台定义的一个string,他包含了从数据库取出来的所有节点信息,只能够写这里

//tree.setURL（"Catalog.asp"）;

//tree.setTarget（"MzMain"）;

//document.write（tree.toString（））;//亦可用obj.innerHTML=tree.toString（）;

//tree.focus（111）;//让id是111的节点获得焦点,同时也展开了这个节点上的父节点!

//-->

--%>

publicstringLoadTree（）

   {

       stringsql="SELECTParent,ID,NameFROM[T_Tree]";

       SqlDataAdapterda=newSqlDataAdapter（sql,"DATABASE=aa;SERVER=localhost;UID=sa;PWD=sa;"）;

       DataTabledt=newDataTable（）;

       da.Fill（dt）;

       stringnodes="";

       nodes="vardata={};";

       foreach（DataRowdrindt.Rows）

       {

               nodes+="data[\'"+dr["Parent"].ToString（）+"_"+dr["ID"].ToString（）+"\']=\'text:

"+dr["Name"].ToString（）+";\';\r\n";

       }

       nodes+="Using（\"System.Web.UI.WebControls.MzTreeView\"）;";

       nodes+="vara=newMzTreeView（）;";

       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）;";

       returnnodes;

   }

【摘要】

梅花雪树控件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字符只读，树的实例名，同树实例化时作为参数传入（大小写敏感）：

varTree=newMzTreeView（"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时这步操作将会比较耗时

下面是几个例子。

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

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

   

       A.MzTreeview

       {

           font-size:

9pt;

           padding-left:

3px;

       }

--

       window.tree=newMzTreeView（"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（））;

   -->

后台页面：

usingSystem;

usingSystem.Data;

usingSystem.Configuration;

usingSystem.Collections;

usingSystem.Web;

usingSystem.Web.Security;

usingSystem.Web.UI;

usingSystem.Web.UI.WebControls;

usingSystem.Web.UI.WebControls.WebParts;

usingSystem.Web.UI.HtmlControls;

usingSystem.Data.Sql;

usingSystem.Data.SqlClient;

usingTreeDemo.DBUtility;

namespaceTree

{

   publicpartialclass_Default:

System.Web.UI.Page

   {

       publicstaticstringstr;

       protectedvoidPage_Load（objectsender,EventArgse）

       {

       }

       publicvoidLoadTree（）

       {         

           stringsql="SelectSiteID,isnull（PID,0）asPID,SiteCaptionFromAreaSiteorderbySiteID";

           SqlDataReaderdr=TreeDemo.DBUtility.SqlHelper.ExecuteReader（SqlHelper.ConnectionString,CommandType.Text,sql,null）;

           stringnode="";

           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来实现的，这里是一次性加载所有数据，没有实现异步加载。

vartree=newMzTreeView（"tree"）;//创建一个树的实例

functionTheTree（）

{

 tree.icons["proj"]="project.gif";

 tree.icons["book"] ="book.gif";

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

 tree.setIconPath（"image/"）;

 tree.nodes["0_1"]="text:

项目列表";//虚拟根目录

 varDataSet=FinetWebCPM.TreeTest.GetProject（）.value;

 varrows=DataSet.Tables[0].Rows;

 for（i=0;i

 {

 tree.nodes["1_"+rows[i].ProjID]="text:

"+rows[i].SCName;//nodes数组的下表的格式是[父节点id_子节点id]

 varDataSetPPage=FinetWebCPM.TreeTest.GetPage（rows[i].ProjID）.value;

 if（DataSetPPage!

=null）

 {

  varrowspage=DataSetPPage.Tables[0].Rows;

  if（rowspage.length>0）

  {

   for（n=0;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文档：

xmlversion="1.0"encoding="utf-8"?

>

help.js:

vardata={};

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

       vardata={};

       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。

varxmlstr=''+

       ''+

       ''+

       ''+

           ''+

           ''+

       ''+

       ''+

     '';

       Using（"System.Web.UI.WebControls.MzTreeView"）;

       vartree=newMzTreeView（）;

       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节点

梅花雪树的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（）

{

 functionloadImg（C）{for（variinC）{if（"string"==typeofC[i]）{

 vara=newImage（）;a.src=me.iconPath+C[i];C[i]=a;}}}varme=this;

 loadImg（MzTreeView.icons.expand）;loadImg（MzTreeView.icons.collapse）;

 loadImg（MzTreeView.icons.line）;me