MzTreeView 1.0 树形控件

MzTreeView 1.0 树形控件

使用:
1.下载控件,MzTreeView10
2.把MzTreeView10整个目录放置在web工程下(图片,js)
3.在后台建一个java类(生成字符串返回给前台)
格式如下:

[color=red]tree.nodes["408_1239"]=" text:显示文本; data:id=自己的ID;URL=转向的URl method:alert('');";[/color]

!注意分号和“”号也都要,自己写方法取得数据库要生存树的表所有记录,然后拼凑,一条记录生成一个这样的节点字符串给JS解析

tree是可以指定的树的名称
408 是数据库的父节点id
1239 是自己的id
text 是显示在页面的节点名称
data 跟URL 配和,当点击转向另外地址是 后面自动带参数id=自己的ID;如url.jsp?id=5;
mehod 点击后触发的js方法,可自定义执行

默认解析根节点为0(数据库要设置)


tree表示自定义的树名称,要与页面的var SORTTREE = new MzTreeView("SORTTREE");两个都相同
如上面这个在数据库里就要定义tree为"SORTTREE" 字符串

HTML页面中

<script type="text/javascript" src="<%=path%>/include/js/MzTreeView10/MzTreeView10.js"></script>

<body bgcolor="#FFFFDB" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<SCRIPT LANGUAGE="JavaScript">

var SORTTREE = new MzTreeView("SORTTREE");//两个名字都要和数据库命名的树一致


SORTTREE.icons["property"] = "<%=path%>/include/js/MzTreeView10/property.gif";
SORTTREE.icons["css"] = "<%=path%>/include/js/MzTreeView10/collection.gif";
SORTTREE.icons["book"] = "<%=path%>/include/js/MzTreeView10/book.gif";
SORTTREE.iconsExpand["book"] = "<%=path%>/include/js/MzTreeView10/bookopen.gif"; //展开时对应的图片
SORTTREE.setIconPath("<%=path%>/include/js/MzTreeView10/"); //可用相对路径


<%=TreeHandler.getSortTree()%>//在这里返回数据库生成的字符串

SORTTREE.setURL("#");
SORTTREE.setTarget("MzMain");
document.write(SORTTREE.toString()); //亦可用 obj.innerHTML = tree.toString();

</SCRIPT>
</body>

</body>


MzTreeView未定义错误
下下来的是GBK编码,jsp页面本省设的是UTF-8编码,把JS文件转成UTF-8就可以了
利用计事本

例子【转】有点小bug 看得比较明白:

<head>
</head>
<body>

<script language="JavaScript"
src="e:/MzTreeView10/MzTreeView10.js"></script>
<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("e://MzTreeView10//"); //可用相对路径

tree.nodes["0_1"] = "text:我的根";
tree.nodes["1_400"] = "text:JavaScript; icon:book; data:id=400";
tree.nodes["400_409"] = "text:属性; data:id=409";
tree.nodes["408_1239"] = "text:||; data:id=239; method:alert(alert!');"; //调用html方法:alert
tree.nodes["409_1163"] = "text:E; data:id=163; method:myMethod('节点响应:调用自定义函数:myMethod!')"; //调用自定义函数:myMethod

var strstree="\""+"text:"+"动态节点500"+"; data:id=500"+"\"";

//mytree(tree,strstree);//用方法动态定义“Tree”的子节点。
//注:动态定义的方法要与 var tree = new MzTreeView("tree");它在同一个<script language="JavaScript">中!

tree.nodes["1_600"]="text:动态生成600; data:id=500";
tree.nodes["1_700"]=strstree;
document.write(tree.toString()); //亦可用 obj.innerHTML = tree.toString();


function mytree(mytreevar,strtext){
mytreevar.nodes["1_500"]=strtext;
}
function myMethod(str){
alert(str);
}
function cc(){
cccc.value=strstree;
}
</script>

<input type="text" id="cccc" size=50 value=""/>
<input type="button" id="11" value="cc" onClick="cc();"/>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值