梅花雪树控件的使用及下载

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

XML/HTML代码
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Tree._Default" %>  
  2.   
  3. >  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml" >  
  6. <head runat="server">  
  7.     <title>目录树title>  
  8.     <script type="text/javascript" language="javascript" src="MzTreeView10.js">script>  
  9.     <link href="css/Global.css" type="text/css" rel="stylesheet"/>  
  10.     <style type="text/css">  
  11.         A.MzTreeview   
  12.         ...{   
  13.             font-size: 9pt;   
  14.             padding-left: 3px;   
  15.         }   
  16.     style>  
  17. head>  
  18. <body>  
  19.     <form id="form1" runat="server">  
  20.     <script type="text/javascript" language="javascript">  
  21.     for(var i in C)...{if("string"==typeof C[i])...{   
  22.   var a=new Image(); a.src=me.iconPath + C[i]; C[i]=a;}}} var me=this;   
  23.   loadImg(MzTreeView.icons.expand);loadImg(MzTreeView.icons.collapse);   
  24.   loadImg(MzTreeView.icons.line); me.firstNode=null;   
  25.   loadCssFile(this.iconPath +"mztreeview.css""MzTreeView_CSS");   
  26.   
  27.   this.initialize(); var str="no data", i, root=this.rootNode;   
  28.   if (root.hasChild)...{var a = [], c = root.childNodes; me.firstNode=c[0];   
  29.   for(i=0;i"");}   
  30.   setTimeout(function()...{me.afterRender();}, 10);   
  31.   return "+ this.index +"' "+   
  32.     "οnclick='Instance(""+ this.index +"").clickHandle(event)' "+   
  33.     "οndblclick='Instance(""+ this.index +"").dblClickHandle(event)' "+   
  34.     "οncοntextmenu='Instance(""+ this.index +"").contextMenuHandle(event)' "+//这里是我们添加的右键事件   
  35.     ">"+ str +"";   
  36. };  

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

JavaScript代码
  1. //private: contextMenuHandle   
  2. MzTreeView.prototype.contextMenuHandle = function(e)   
  3. ...{   
  4.   e = window.event || e; e = e.srcElement || e.target;   
  5.   if((e.tagName=="A" || e.tagName=="IMG")&& e.id)   
  6.   ...{   
  7.     e=this.nodes[e.id.substr(e.id.lastIndexOf("_") +1)];   
  8.     //e是一个节点对象,如我这里是判断这个节点是否有子节点,然后执行相应的方法 e.hasChild ? Tool(e,"project"):Tool(e,"page");   
  9.     e.focus();   
  10.     this.currentNode=e;this.dispatchEvent(new System.Event("oncontextmenu"));   
  11.   }   
  12. };  

 

XML/HTML代码
  1. xml version="1.0" encoding="utf-8"?>  
  2. <nodes>  
  3.     <node id="100" url="/page/100.htm" text="100页面" />  
  4.     <node id="101" url='/page/101.htm' text="101页面">  
  5.         <node text="child node" />  
  6.     node>  
  7.     <node id="102" url='/page/102.htm' text="102页面" />  
  8.     <node id="103" url='/page/103.htm' text="103页面" />  
  9. nodes>  

 

C#代码
  1. using System;   
  2. using System.Data;   
  3. using System.Configuration;   
  4. using System.Collections;   
  5. using System.Web;   
  6. using System.Web.Security;   
  7. using System.Web.UI;   
  8. using System.Web.UI.WebControls;   
  9. using System.Web.UI.WebControls.WebParts;   
  10. using System.Web.UI.HtmlControls;   
  11. using System.Data.Sql;   
  12. using System.Data.SqlClient;   
  13. using TreeDemo.DBUtility;   
  14.   
  15. namespace Tree   
  16. ...{   
  17.     public partial class _Default : System.Web.UI.Page   
  18.     ...{   
  19.         public static string str;   
  20.   
  21.         protected void Page_Load(object sender, EventArgs e)   
  22.         ...{   
  23.   
  24.         }   
  25.   
  26.         public void LoadTree()   
  27.         ...{            
  28.             string sql = "Select SiteID,isnull(PID,0) as PID,SiteCaption From AreaSite order by SiteID";   
  29.             SqlDataReader dr = TreeDemo.DBUtility.SqlHelper.ExecuteReader(SqlHelper.ConnectionString,CommandType.Text, sql, null);   
  30.             string node = "";   
  31.             while(dr.Read())   
  32.             ...{   
  33.                 node = "      tree.nodes[" + """ + dr["PID"].ToString() + "_" + dr["SiteID"].ToString() + """ + "] = ";   
  34.                 node = node + """ + "text:" + dr["SiteCaption"].ToString() + ";" + """;   
  35.                 Response.Write(node);   
  36.             }   
  37.             if (!dr.IsClosed)   
  38.                 dr.Close();   
  39.         }   
  40.     }   

 


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

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部