梅花雪树控件的属性及方法
【背景】
邮件地址簿选择树,使用梅花雪树控件实现,但是没有实现自动展开到当前用户所在部门,尝试很多种方式都无果,今天无意间发现梅花雪树的属性和方法介绍,故进行收藏。
梅花雪树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时这步操作将会比较耗时
//下面是用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().val;
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).val;
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 id="100" url="/page/100.htm" text="100页面" />
<node id="101" url='/page/101.htm' text="101页面">
<node text="child node" />
</node>
<node id="102" url='/page/102.htm' text="102页面" />
<node id="103" url='/page/103.htm' text="103页面" />
</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部分
<SCRIPT LANG GE="JavaScript">
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=tr;//是否使用checkbox
tree.canOperate=tr;
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()
...{
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(MzTreeView.icons.expand);loadImg(MzTreeView.icons.collapse);
loadImg(MzTreeView.icons.line); me.firstNode=null;
loadCssFile(this.iconPath +"mztreeview.css", "MzTreeView_CSS");
this.initialize(); var str="no data", i, root=this.rootNode;
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.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.s str(e.id.lastIndexOf("_") +1)];
//e是一个节点对象,如我这里是判断这个节点是否有子节点,然后执行相应的方法 e.hasChild ? Tool(e,"project"):Tool(e,"page");
e.focus();
this.currentNode=e;this.dispatchEvent(new System.Event("oncontextmenu"));
}
};
梅花雪树控件的属性及方法相关推荐
- MFC树控件的属性和初始化(基于对话框的编程)
目录 一.控件属性 1.找控件Tree Control 2.Has Lines和Has Buttons属性 3.Lines At Root属性 二.代码操作Tree Control显示内容 1.添加T ...
- 访问母版页控件、属性、方法及母版页中调用内容页的方法
首先,必须通过内容页中的MasterTye指令,对母版页实施强类型化,即在内容页代码头的设置中增加如下指令 <%@ MasterType VirtualPath="~/Master/M ...
- C#常用控件的属性以及方法(转载)
-----以前看别人的,保存了下来,但是忘了源处,望见谅. C#常用控件属性及方法介绍 目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichText ...
- [原创]FineUI秘密花园(二十四) — 树控件之数据绑定
上一篇文章我们介绍了树控件的基本用法,不过都是通过标签来声明树控件的结构,本章我们会详细讲解如何在后台绑定树控件. 绑定到XmlDocument 下面通过一个简单的例子来看如何将XmlDocument ...
- activex控件 新对象 ocx 初始化_Office已经支持64位的树控件Treeview了
之前在使用Office365时发现微软其实已经悄悄地开始提供了64位的Treeview树控件,只是并没有公开宣布.当时是在一个网友的电脑上说他可以在64位Excel中可直接使用64位树控件,当时以为他 ...
- 【JEECG_3.7.1】Online树控件的使用
在JEECG当中有个分类管理: 在线开发当中的树控件关联的数据信息,取自于这个分类管理. 要使用树控件,我们可以将页面属性中的控件类型选择 –"树控件" 之后即可在在线&qu ...
- asp.net DataGridTree表格树控件 下拉树 DropTree c# .net
1.下拉树 DropTree c# .net 下拉树实现原理 输出json到客户端 客户端实现动态加载 中间不会和服务端交互 数据量支持上 经测试 几千 还是很快的 本下拉树控件是用c#+js树实现 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面...
http://www.cnblogs.com/wuhuacong/p/3669575.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- 对客户端树控件的包装
树控件在项目被经常使用,dtree.js这个脚本也被广泛使用,在服务端用起来有些不太方便,我写了以下一个类,是对dtree.js的包装. 代码 1 using System; 2 using Sys ...
- MFC_C++02_模态对话框,非模态对话框,StaticText静态文本,CEditCtrl控件,ComboBox下拉框,CListCtrl控件,CTreeCtrl 树控件,TabCtrl标签控件
01 模态对话框创建 更改标题名: 菜单栏 --> 视图->工具箱 ,找到工具箱 导入两个按钮: 准备对话框: 插入就可以了,更改名称 双击按钮,可以进入点击事件 创建控件的类:右击-&g ...
最新文章
- boost::asio使用UDP协议通信源码实现
- linux 内核参数 杨,Linux 内核参数
- PHP-Codeigniter:实习笔记1
- Faster R-CNN 深入理解 改进方法汇总
- linux下svn迁移
- 文件标识符必须为双精度类型的整数值标量_数据类型
- 黑马程序员_Java高新技术--代理
- 使用windows crypto API加密解密
- PyTorch深度学习:60分钟入门(Translation)
- 核心频率个加速频率_AMD 32核心频率飞起!Intel
- MySQL 数据库管理之 --- SQL 语言进阶二
- Kylo调研总结(一)
- 五星大饭店韩文插曲-请不要离我而去MV
- matlab一阶导数图,一阶微分excel【如何用EXCEL做一阶导数图?】
- Ubuntu 18.04 LTS 桌面版 WPS 安装字体
- 关于计算球体体积的Java代码啾咪~
- vmware虚拟机运行速度卡慢原因分析及解决办法大全(二)
- 必看!Salesforce管理员职场如何快速晋升?
- 小福利,带你快速入门sumifs多条件求和函数、设置下拉菜单结合vlookup函数双条件查找数据、excel的切片器(表关联)、数据透视表、数据透视图
- 康奈尔大学计算机系教授,独家解析康奈尔大学EE专业的五大方向
热门文章
- b365老掉线 h3c路由器_H3C路由器PPP连接的常见故障及解决方法
- 纯css按钮代码,纯CSS实现3D按钮效果实例代码
- 叶史瓦大学计算机科学,福特汉姆大学研究生学院
- elasticsearch实现搜索拼音然后高亮内容
- php smarty框架案例,PHP框架_Smarty
- php smarty extends,php封装的smarty类完整实例
- Klog开发笔记——分页插件 Kaminari 介绍
- PUN ☀️九、玩家网络实例化与昵称显示
- iReport下载安装配置及编译
- 『HDU 5855』Less Time, More profit