梅花雪树2.0下载mztreeview2.0.rar
梅花雪树1.0下载mztreeview10.js
梅花雪树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
- <%@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">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <headrunat="server">
- <title>目录树</title>
- <scripttype="text/javascript"language="javascript"src="MzTreeView10.js"></script>
- <linkhref="css/Global.css"type="text/css"rel="stylesheet"/>
- <styletype="text/css">
- A.MzTreeview
- ...{
- font-size:9pt;
- padding-left:3px;
- }
- </style>
- </head>
- <body>
- <formid="form1"runat="server">
- <scripttype="text/javascript"language="javascript">
- <!--
- 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());
- -->
- </script>
- </form>
- </body>
- </html>
后台页面：
_Default
//下面是用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<rows.length;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<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
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';
- <SCRIPTLANGUAGE="JavaScript">
- 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='<nodes>'+
- '<nodetext="中国"/>'+
- '<nodetext="江西"/>'+
- '<nodetext="广东">'+
- '<nodetext="梅州"/>'+
- '<nodetext="深圳"/>'+
- '</node>'+
- '<nodetext="河北"/>'+
- '</nodes>';
- 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节点
- </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()
- ...{
- 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.firstNode=null;
- loadCssFile(this.iconPath+"mztreeview.css","MzTreeView_CSS");
- this.initialize();varstr="nodata",i,root=this.rootNode;
- if(root.hasChild)...{vara=[],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"<divclass='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(newSystem.Event("oncontextmenu"));
- }
- };
- <?xmlversion="1.0"encoding="utf-8"?>
- <nodes>
- <nodeid="100"url="/page/100.htm"text="100页面"/>
- <nodeid="101"url='/page/101.htm'text="101页面">
- <nodetext="childnode"/>
- </node>
- <nodeid="102"url='/page/102.htm'text="102页面"/>
- <nodeid="103"url='/page/103.htm'text="103页面"/>
- </nodes>
- 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="tree.nodes["+"""+dr["PID"].ToString()+"_"+dr["SiteID"].ToString()+"""+"]=";
- node=node+"""+"text:"+dr["SiteCaption"].ToString()+";"+""";
- Response.Write(node);
- }
- if(!dr.IsClosed)
- dr.Close();
- }
- }
- }
扫一扫
3591
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
