Mztreeview1.0 js树控件示例 /Files/qiaojun/Mztreeview1.0.rar
Mztreeview1.0+checkBox js树控件示例 /Files/qiaojun/Mztreeview1.0_CheckBox.rar
Mztreeview1.0+自己设计 js树控件示例 /Files/qiaojun/默认展开结点的MZ.rar
Mztreeview2.0 js树控件示例 /Files/qiaojun/mztreeview2.rar
梅子园日期控件:
/Files/qiaojun/Calendar.rar
/Files/qiaojun/datetime.rar
/Files/qiaojun/Web_Calendar_30.rar
Mztreeview1.0 js树控件示例
<script language="JavaScript" src="MzTreeView10.js"></script>
<div id="treeviewarea">
<script language="JavaScript">
<!--
var tree = new MzTreeView("tree");
tree.setIconPath("treeview/");
des['0_1'] = "text:检验信息管理; ";
des['1_2'] = "text:外购产品检验组; ";
des['1_3'] = "text:最终产品检验; ";
des['1_4'] = "text:复检情况; ";
des['1_5'] = "text:办公辅助; ";
des['1_6'] = "text:基础信息管理; ";
des['1_7'] = "text:部门意见与建议; ";
des['1_8'] = "text:系统意见与建议; ";
ElementById('treeviewarea').innerHTML = String();
pandAll();-->
</script>
</div>
Mztreeview1.0+checkBox js树控件示例
<script language="JavaScript" src="MzTreeView11.js"></script>
<script language="JavaScript">
<!--
= new MzTreeView("tree");
tree.icons["property"] = "property.gif";
tree.icons["css"] = "collection.gif";
tree.icons["event"] = "collection.gif";
tree.icons["book"] = "book.gif";
tree.iconsExpand["book"] = "bookopen.gif"; //展开时对应的图片
tree.setIconPath("treeview/"); //可用相对路径
des["-1_SH8900000000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:系统管理;"
des["SH8900000000_SH8901000000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:文书模板管理;url:workflow/manage/template.asp"
des["SH8900000000_SH8902000000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:自定义流程管理;url:workflow/manage/Services.ASP"
des["SH8900000000_SH8903000000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:质量考核因素;url:workflow/manage/managezl.asp"
des["SH8900000000_SH8904000000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:节假日管理;url:workflow/manage/freeday.asp"
des["SH8900000000_SH8905000000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:事项管理;url:workflow/itemsystem.asp"
des["SH8900000000_SH8906000000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:用户及权限管理;"
des["SH8900000000_SH8907000000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:组织机构管理;"
des["SH8906000000_SH8906010000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:添加新用户;url:SystemManager/User_add.aspx"
des["SH8907000000_SH8907010000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:添加组织机构;url:SystemManager/Org_add.aspx"
des["SH8906000000_SH8906020000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:用户管理;url:SystemManager/User_man.aspx"
des["SH8907000000_SH8907020000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:组织机构管理;url:SystemManager/Org_man.aspx"
des["SH8906000000_SH8906030000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:添加新角色;url:SystemManager/Role_add.aspx"
des["SH8906000000_SH8906040000"] = "ctrl:true;ctrlName:sc;ctrlChecked:true;text:系统角色管理;url:SystemManager/Role_man.aspx"
tree.setURL("#");
tree.wordLine = false;
tree.setTarget("main");
document.String());
//pandAll();
//-->
</script>
Mztreeview2.0 js树控件示例
<script src="scripts/jsframework.js"></script>
<input type="button" value="expandAll" οnclick=&#pandAll('1')" />
<input type="button" value="collapseAll" οnclick=&#llapseAll('1')" />
<input type="button" value="focusPath" οnclick="a.focusNodeByPath('1_9009_53_5304')" />
<input type="button" value="append" οnclick="a.appendNode('9001_mm', 'text: new node;')">
<SCRIPT LANGUAGE="JavaScript">
var data={};
data["-1_1"] = "text: CSDN社区起始点;";
data['1_9001'] = 'text: 我感兴趣的社区;'; //JSData: myselect.aspx
data['1_9002'] = 'text: 我的技术社区 xml; XMLData: l ';
data['1_9009'] = 'text: 开发语言; .asp?typenum=1&roomid=1 ; JSData: scripts/csdn/community/treedata/language.js ';
data['1_54'] = 'text: Java 技术; .asp?typenum=1&roomid=54 ; JSData: scripts/csdn/community/treedata/java.js ';
data['1_52'] = 'text: .Net 技术; .asp?typenum=1&roomid=52 ; JSData: scripts/csdn/community/treedata/donnet.js ';
data['1_9003'] = 'text: IBM developerWorks 技术社区; JSData: scripts/csdn/community/treedata/ibm.js ';
data['1_9004'] = 'text:Borland 技术社区; JSData: scripts/csdn/community/treedata/borland.js ';
data['1_2'] = 'text: 数据库开发; .asp?typenum=1&roomid=2 ; JSData: scripts/csdn/community/treedata/db.js ';
data['1_3'] = 'text: WEB 开发; .asp?typenum=1&roomid=3 ; JSData: scripts/csdn/community/treedata/web.js ';
data['1_4'] = 'text: 软件工程/管理; .asp?typenum=1&roomid=4 ; JSData: scripts/csdn/community/treedata/project.js ';
data['1_5'] = 'text: 企业开发; .asp?typenum=1&roomid=5 ; JSData: scripts/csdn/community/treedata/enterprise.js ';
data['1_6'] = 'text: 专题开发/技术/项目; .asp?typenum=1&roomid=6 ; JSData: scripts/csdn/community/treedata/special.js ';
data['1_7'] = 'text: 多媒体/设计/Flash开发; .asp?typenum=1&roomid=7 ; JSData: scripts/csdn/community/treedata/multimedia.js ';
data['1_8'] = 'text: Linux/Unix 社区; .asp?typenum=1&roomid=8 ; JSData: scripts/csdn/community/treedata/linux.js ';
data['1_9'] = 'text: 硬件/嵌入开发; .asp?typenum=1&roomid=9 ; JSData: scripts/csdn/community/treedata/embed.js ';
data['1_63'] = 'text: 移动平台; .asp?typenum=1&roomid=63 ; JSData: scripts/csdn/community/treedata/moble.js ';
data['1_609'] = 'text: 英特尔多核计算技术; data:roomid=609';
data['1_10'] = 'text: Windows 专区; .asp?typenum=1&roomid=10 ; JSData: scripts/csdn/community/treedata/window.js ';
data['1_9005'] = 'text: Microsoft Office 应用与开发; JSData: scripts/csdn/community/treedata/office.js ';
data['1_11'] = 'text: 硬件使用; .asp?typenum=1&roomid=11 ; JSData: scripts/csdn/community/treedata/hardware.js ';
data['1_20'] = 'text: 计算机图书; JSData: scripts/csdn/community/treedata/book.js ';
data['1_13'] = 'text: 软件培训/认证/考试; .asp?typenum=1&roomid=13 ; JSData: scripts/csdn/community/treedata/train.js ';
data['1_14'] = 'text: 扩充话题; .asp?typenum=1&roomid=14 ; JSData: scripts/csdn/community/treedata/expansion.js ';
data['1_9006'] = 'text: 程序员杂志社; JSData: scripts/csdn/community/treedata/mag.js ';
data['1_15'] = 'text: 社区支持; .asp?typenum=1&roomid=15';
data['15_1501'] = 'text: 公告; data:roomid=1501';
data['15_1502'] = 'text: 新版申请; data:roomid=1502';
data['15_1503'] = 'text: 建议和意见; data:roomid=1503';
data['15_1504'] = 'text: 投诉专区; data:roomid=1504';
data['15_1505'] = 'text: 社区电子杂志; data:roomid=1505';
data['15_1500001'] = 'text: CSDN Blog支持专区; data:roomid=1506';
data['1_16'] = 'text: 产品/厂家; .asp?typenum=1&roomid=16 ; JSData: scripts/csdn/community/treedata/manufacturer.js ';
data['1_9007'] = 'text: 系统功能; JSData: scripts/csdn/community/treedata/system.js ';
data['1_9008'] = 'text: 版主管理; .asp ; JSData: scripts/csdn/community/treedata/manage.js ';
var xmlstr='<nodes>'+
'<node text="总经办" />'+
'<node text="人力资源部" />'+
'<node text="综合管理部" />'+
'<node text="财务部" />'+
'<node text="研发中心" />'+
'<node text="客户服务中心">'+
'<node text="实施部" />'+
'<node text="运维服务部" />'+
'</node>'+
'<node text="营销中心" />'+
'</nodes>';
//*
Using("System.Web.UI.WebControls.MzTreeView");
var a = new MzTreeView();
a.dataSource = data
a.loadXmlDataString(xmlstr, 1);
a.setJsDataPath("scripts/csdn/community/treedata/");
a.setXmlDataPath("scripts/csdn/community/treedata/");
//a.rootId="1";
a.autoSort=false;
a.useCheckbox=true
a.canOperate=true;
document.der());
a.expandLevel(1);
//*/
</SCRIPT>
【摘要】
梅花雪树控件1.0，2.0的使用。
【全文】
梅花雪树1.0控件 有以下属性和方法。
属性
MzTreeView 类的一些属性： 属性名 类型 属性的具体说明
des 集合 服务器端给树指定数据源时数据存放的对象，具体存放格式如：
des["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 集合 树里展开状态的图标存放
lors 集合 树里使用到的几个颜色存放
MzTreeView 在客户端的节点所拥有的属性： 属性名 属性的具体说明
node.id 数字文本，节点的ID
node.parentId 数字文本，节点对应的父节点ID
文本，节点的显示文本
node.hint 文本，节点的注释说明
node.icon 文本，节点对应的图标
node.path 文本，节点在树里的绝对路径：0_1_10_34
node.url 文本，该节点的 URL
node.target 文本，该节点链接的目标框架名
node.data 文本，该节点所挂载的数据
hod 文本，该节点的点击对应处理语句
node.parentNode 对象，节点的父节点对象
node.childNodes 数组，包含节点下所有子节点的数组
node.sourceIndex 文本，服务器给予的数据里对象的 parentId_nodeId 的组合字符串
node.hasChild 布尔值，指该节点是否有子节点
node.isLoad 布尔值，本节点的子节点数据是否已经在客户端初始化
node.isExpand 布尔值，节点的展开状态
方法
MzTreeView 类的一些方法： 方法名 方法的具体说明
String() 类的默认初始运行
MzTreeView.buildNode(id) 将该节点的所有下级子节点转换成 HTML 并在网页上体现出来
deToHTML(node, AtEnd) 将 node 转换成 HTML
MzTreeView.load(id) 从数据源里加载当前节点下的所有子节点
deInit(sourceIndex, parentId) 节点的信息初始，从数据源到客户端完整节点的转化
MzTreeView.focus(id) 聚集到某个节点上
pand(id[, sureExpand]) 展开节点（包含下级子节点数据的加载初始化）
MzTreeView.setIconPath(path) 给节点图片设置正确的路径
deClick(id) 节点链接点击时同时被触发的点击事件处理方法
MzTreeView.upperNode() 跳转到当前聚集节点的父级节点
MzTreeView.lowerNode() 跳转到当前聚集节点的子级节点
MzTreeView.pervNode() 跳转到当前聚集节点的上一节点
Node() 跳转到当前聚集节点的下一节点
pandAll() 展开所有的树点，在总节点量大于500时这步操作将会比较耗时
Asp调用Mztreeview2.0的示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MzTree.aspx.cs" Inherits="MzTree" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="" >
<head runat="server">
<title>无标题页</title>
<script language="JavaScript" src="scripts/jsframework.js"></script>
</head>
<body leftmargin="0" topmargin="2">
<form id="form1" runat="server">
<script language="javascript" type="text/javascript">
<%=LoadTree() %>
</script>
<%--
<SCRIPT LANGUAGE="JavaScript">
= new MzTreeView("tree");
//tree.setIconPath("menutree/"); //可用相对路径
<%=str%> //这里的str是在后台定义的一个string,他包含了从数据库取出来的所有节点信息,只能够写这里
//tree.setURL("Catalog.asp");
//tree.setTarget("MzMain");
//document.String()); //亦可用 obj.innerHTML = String();
//tree.focus(111); //让id是111的节点获得焦点,同时也展开了这个节点上的父节点!
//-->
</SCRIPT> --%>
</form>
</body>
</html>
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() + ";';rn";
}
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.der());";
nodes += &#pandLevel(1);";
return nodes;
}
Asp调用Mztreeview1.0的示例
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Tree._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="" >
<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">
<!--
= 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.String());
-->
</script>
</form>
</body>
</html>
后台页面：
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 = "rn des[" + """ + 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/");
des["0_1"] = "text:项目列表";//虚拟根目录
var DataSet = FinetWebCPM.TreeTest.GetProject().value;
var rows = DataSet.Tables[0].Rows;
for(i = 0 ;i < rows.length ; i++)
{
des["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++)
{
des[rows[i].ProjID+"_"+rowspage[n].PageID] = "text:"+rowspage[n].PageTitle+";url:"+rowspage[n].PageUrl;
}
}
else
{
des[rows[i].ProjID+"_None"] = "text:无此项目页面！";
}
}
else
{
des[rows[i].ProjID+"_None"] = "text:无此项目页面！";
}
}
ElementById("treeviewarea").innerHTML = String();
}
下面是梅花雪树空间2.0的例子。
2.0的功能有了很大的改进，加入了动态加载，可以使用xml，js，一个数组等来作为数据源，在节点中还加入了checkbox。
下面看看用xml,和js来作为数据源的。
l文档：
help.js:
var data={};js部分：
<SCRIPT LANGUAGE="JavaScript">
var data={};
data["-1_1"] = "text: 起点;";//nodes的下标和1.0的格式是一样的。
data['1_9001'] = 'text: 首页;';
data['1_9002'] = 'text: 介绍; XMLData: l ';
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.der());//输出树
pandLevel(1);//展开1节点
</SCRIPT>
梅花雪树的url默认是#，如果你的树很高，你单击下面节点的时候会跳到页面的顶层，你可以将url写成url:javascript:return;这样来屏蔽掉默认的url，不过你设置成 这样还将target属性是指成_blank的话，将会弹出一个新的窗口。
也许你要修改这些默认设置的话，你可以修改scriptssystemwebuiwebcontrolsmztreeview.js里面的代码。如果你会英语及JS的话，应该是很简单的。
梅花雪树控件只有双击，和单击事件，下面来为树控件加各右键菜单事件，打开scriptssystemwebuiwebcontrolsmztreeview.js，文件，找到render事件，这方法改成
der = 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(pand);loadImg(llapse);
loadImg(MzTreeView.icons.line); me.firstNode=null;
loadCssFile(this.iconPath +"mztreeview.css", "MzTreeView_CSS");
this.initialize(); var str="no data", i, root&#Node;
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 1.0 from--->>> /
开发文档: .asp?id=436
控件下载: .rar
应用示例: .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 | 点击该链接时所想触发的脚本语句 |
| 属性名 | 类型 | 属性的具体说明 |
|---|---|---|
| 集合 | 服务器端给树指定数据源时数据存放的对象，具体存放格式如： des["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 | 集合 | 树里展开状态的图标存放 |
| 集合 | 树里使用到的几个颜色存放 |
| 属性名 | 属性的具体说明 |
|---|---|
| node.id | 数字文本，节点的ID |
| node.parentId | 数字文本，节点对应的父节点ID |
| 文本，节点的显示文本 | |
| node.hint | 文本，节点的注释说明 |
| node.icon | 文本，节点对应的图标 |
| node.path | 文本，节点在树里的绝对路径：0_1_10_34 |
| node.url | 文本，该节点的 URL |
| node.target | 文本，该节点链接的目标框架名 |
| node.data | 文本，该节点所挂载的数据 |
| 文本，该节点的点击对应处理语句 | |
| node.parentNode | 对象，节点的父节点对象 |
| node.childNodes | 数组，包含节点下所有子节点的数组 |
| node.sourceIndex | 文本，服务器给予的数据里对象的 parentId_nodeId 的组合字符串 |
| node.hasChild | 布尔值，指该节点是否有子节点 |
| node.isLoad | 布尔值，本节点的子节点数据是否已经在客户端初始化 |
| node.isExpand | 布尔值，节点的展开状态 |
| 方法名 | 方法的具体说明 |
|---|---|
| 类的默认初始运行 | |
| MzTreeView.buildNode(id) | 将该节点的所有下级子节点转换成 HTML 并在网页上体现出来 |
| 将 node 转换成 HTML | |
| MzTreeView.load(id) | 从数据源里加载当前节点下的所有子节点 |
| 节点的信息初始，从数据源到客户端完整节点的转化 | |
| MzTreeView.focus(id) | 聚集到某个节点上 |
| 展开节点（包含下级子节点数据的加载初始化） | |
| MzTreeView.setIconPath(path) | 给节点图片设置正确的路径 |
| 节点链接点击时同时被触发的点击事件处理方法 | |
| MzTreeView.upperNode() | 跳转到当前聚集节点的父级节点 |
| MzTreeView.lowerNode() | 跳转到当前聚集节点的子级节点 |
| MzTreeView.pervNode() | 跳转到当前聚集节点的上一节点 |
| 跳转到当前聚集节点的下一节点 | |
| 展开所有的树点，在总节点量大于500时这步操作将会比较耗时 |
<script language="JavaScript"
src=".js"></script>
<base href="/">
<style>
A.MzTreeview
{
font-size: 9pt;
padding-left: 3px;
}
</style>
<script language="JavaScript">
var 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("/"); //可用相对路径
des["0_1"] = "text:WEB 编程";
des["1_100"] = "text:代码示例; data:id=100";
des["1_200"] = "text:梅花雪脚本控件集; data:id=200";
des["1_310"] = "text:CSS; icon:css; data:id=310";
des["1_320"] = "text:DHTML; data:id=320";
des["1_300"] = "text:HTML; data:id=300";
des["1_400"] = "text:JavaScript; icon:book; data:id=400";
des["320_322"] = "text:属性; icon: property; data:id=322";
des["320_323"] = "text:方法; data:id=323";
des["320_324"] = "text:事件; icon:event; data:id=324";
des["320_325"] = "text:集合; data:id=325";
des["400_407"] = "text:对象; data:id=407";
des["400_406"] = "text:方法; data:id=406";
des["400_408"] = "text:运算符; data:id=408";
des["400_409"] = "text:属性; data:id=409";
des["407_1140"] = "text:Date; url:Article.asp; data:id=140";
des["406_1127"] = "text:toString; url:Article.asp; data:id=127";
des["408_1239"] = "text:||; url:Article.asp; data:id=239";
des["409_1163"] = "text:E; url:Article.asp; data:id=163";
tree.setURL("Catalog.asp");
tree.setTarget("MzMain");
document.String()); //亦可用 obj.innerHTML = String();
</script>
Q:
麻烦再请问梅花大哥一下，怎么我用tree.currentNode.id得到的不是。
des["0_1111"]里边的1111啊。那请问如何得到1111这个值啊?
A:
tree.currentNode.sourceIndex;
tree.currentNode.sourceIndex //这个就是你的 1_11 字符串组合，你自己再劈开吧
des[tree.currentNode.sourceIndex] //这个就可数据源里的信息
Q:
MzTreeView 1.0 问题，如何得到选中的节点。或者如何给节点赋click事件。
A:
= new MzTreeView("tree");
你可以用 tree.currentNode 这个属性得到当前被点中的那个节点, 比如你想取得当前点击的这个节点的信息:
text :
id : tree.currentNode.id
父节点 tree.currentNode.parentNode
等等信息
var tree = new MzTreeView("tree");
在点击的处理函数里可以用 tree.currentNode 得到当然这个焦点的树节点对象。再取其它属性
tree.currentNode.id;
;
tree.currentNode.sourceIndex;
tree.currentNode.childNodes; //下级子节点的对象集合
tree.currentNode.childNodes[1].text; //
des['0_1'] = 'text:节点 1; method:alert("node method")';
des['1_2'] = 'text:www.sina';
des['1_3'] = 'text:节点 3';
des['1_4'] = 'text:节点 4';
des['1_5'] = 'text:节点 5';
des['1_6'] = 'text:节点 6';
des['1_7'] = 'text:节点 7';
Q:
想实现以下功能：
当双击“节点3”时 将字符串“22”传给本页面上的一个text文本框（该文本框要求隐藏）。
A:
des['1_3'] = 'text:节点 3; method:document.formName.inputName.value="22";';
本文发布于:2024-01-31 08:42:43，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170666176627261.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
