梅花雪树控件2.0的例子
来源:互联网 发布:java反射带参构造方法 编辑:程序博客网 时间:2024/04/30 02:01
下面是梅花雪树空间2.0的例子。
2.0的功能有了很大的改进,加入了动态加载,可以使用xml,js,一个数组等来作为数据源,在节点中还加入了checkbox。
下面看看用xml,和js来作为数据源的。
myxml.xml文档:
<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:
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 LANGUAGE="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=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()
{
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 +"' "+
"onclick='Instance(/""+ this.index +"/").clickHandle(event)' "+
"ondblclick='Instance(/""+ this.index +"/").dblClickHandle(event)' "+
"on_contextmenu='Instance(/""+ this.index +"/").contextMenuHandle(event)' "+//这里是我们添加的右键事件
">"+ str +"</div>";
};
然后我们还得多写个方法。
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(new System.Event("oncontextmenu"));
}
};
- 梅花雪树控件2.0的例子
- 梅花雪树空间2.0的例子
- 梅花雪的树控件
- 梅花雪树2.0和测试例子
- 关于梅花雪树控件的使用
- 梅花雪树控件的使用
- 梅花雪树控件的使用
- 梅花雪树控件的使用及下载
- 梅花雪树控件的一些使用问题
- 梅花雪树控件的属性及方法
- 梅花雪 的 javascript 日历控件
- 梅花雪控件 ASP.NET 2.0支持
- 梅花雪 树形控件
- 梅花树控件
- 【梅花雪网页脚本控件集】MzTreeView 1.0 一次加载数据的树
- 基于梅花雨日历的日历控件(ASP.NET 2.0)
- java树控件之dtree,rtree,梅花雪树
- 梅花雪树问题
- 在AutoMake宏里面用pkg-config
- 15 个 JavaScript Web UI 库
- Linux内核的配置系统
- nhieushop chovt.com hoan nghenh cac ban ghe tham nhe - chovt hovabbkb
- 可爱又可恨的梅花雪
- 梅花雪树控件2.0的例子
- C#一个singleton的通用实现
- 字符串比较用strcmp
- acm pku 1298 The hardest problem ever的实现
- ListView的长按菜单
- 运算符new和delete的重载
- 关于Delphi第三方控件bsSkinDateEdit日期选择面板中周名显示不正常的解决办法
- 亲历 CSDN 软件开发者大会2.0 2010(上)
- 详细讲解MOS管驱动电路