梅花雪树控件的使用

最新推荐文章于 2017-07-21 15:09:01 发布

转载最新推荐文章于 2017-07-21 15:09:01 发布 · 3.5k 阅读

文章标签：

#url #tree #javascript #function #encoding #xml

js/jQuery/html/css 专栏收录该内容

41 篇文章

订阅专栏

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A.MzTreeview

{

font-size: 9pt;

padding-left: 3px;

}

</style>

</head>

<body>

<!--

window.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("/images/");

<% LoadTree(); %>

tree.focus(4945);

tree.setURL("#");

tree.setTarget("");

document.write(tree.toString());

-->

</script>

</form>

</body>

</html>

后台页面：

_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 = " 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]

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++)

{

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

<?xml version="1.0" encoding="utf-8"?>

<nodes>

</node>

</nodes>

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

var data={};

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。

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.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()

{