为解决用户角色权限或类别管理的问题，在网上下载了一个小例子，感觉挺实用，跟大家分享一下：
MzTreeView + CheckBox 复选框 + 自定义表格，实现类似以下功能：
1.引用MzTreeView2.js脚本：
<script language="javaScript" src="MzTreeView12.js"></script>
2.Style样式:
<style>
body {font:normal 12px 宋体}
a.MzTreeview /* TreeView 链接的基本样式 */ { cursor: hand; color: #000080; margin-top: 5px; padding: 2 1 0 2; text-decoration: none; }
.MzTreeview a.select /* TreeView 链接被选中时的样式 */ { color: highlighttext; background-color: highlight; }
#kkk input {
vertical-align:middle;
}
.MzTreeViewRow {border:none;width:500px;padding:0px;margin:0px;border-collapse:collapse}
.MzTreeViewCell0 {border-bottom:1px solid #CCCCCC;padding:0px;margin:0px;}
.MzTreeViewCell1 {border-bottom:1px solid #CCCCCC;border-left:1px solid #CCCCCC;width:200px;padding:0px;margin:0px;}
</style>
3.Html代码：
（1）结要显示出的节点信息添加一个表头（可自己设计）：
<table class='MzTreeViewRow' style="background:#EEEEEE;border-top:1px solid #CCCCCC;">
<tr>
<th class='MzTreeViewCell0'>节点名称</th>
<th class='MzTreeViewCell1'>ID/编号</th>
</tr>
</table>
（2）添加DIV标签，用于输入选项内容：<div id="kkk"></div><br/>
（3）在DIV标签下面写上以下脚本代码：
<script language="javascript" type="text/javascript">
<!--
//可以加自定义的HTML表格到每一项，这是表头部分，在外部定义方法如下：
var MzTreeViewTH="<table class='MzTreeViewRow'><tr><td class='MzTreeViewCell0'>";
//可以加自定义的HTML表格到每一项，这是单元格部分，在外部定义方法如下：
var MzTreeViewTD="\"</td><td class='MzTreeViewCell1'>\"+ sid +\"</td></tr></table>\"";
window.tree = new MzTreeView("tree");
tree.setIconPath("images/"); //此为展开节点中要显示的图片，可用相对路径
//节点格式说明：N["pnt_cur"]; 其中pnt为父结点的ID，cur为当前结点ID
//以下是要输入的节点信息：
tree.N["0_SH8900000000"] = "ctrl:sel;checked:1;T:系统管理;"
tree.N["SH8900000000_SH8901000000"] = "ctrl:sel;checked:1;T:文书模板管理;url:"
tree.N["SH8900000000_SH8902000000"] = "ctrl:sel;checked:0;T:自定义流程管理;url:"
tree.N["SH8900000000_SH8903000000"] = "ctrl:sel;checked:1;T:质量考核因素;url:"
tree.N["SH8900000000_SH8904000000"] = "ctrl:sel;checked:1;T:节假日管理;url:"
tree.N["SH8900000000_SH8905000000"] = "ctrl:sel;checked:1;T:事项管理;url:"
tree.N["SH8900000000_SH8906000000"] = "ctrl:sel;checked:1;T:用户及权限管理;url:xxxxxx.aspx"
tree.N["SH8900000000_SH8907000000"] = "ctrl:sel;checked:1;T:组织机构管理;url:xxxxxx.aspx"
tree.N["SH8906000000_SH8906010000"] = "ctrl:sel;checked:1;T:添加新用户;url:xxxxxx.aspx"
tree.N["SH8907000000_SH8907010000"] = "ctrl:sel;checked:1;T:添加组织机构;url:xxxxxx.aspx"
tree.N["SH8906000000_SH8906020000"] = "ctrl:sel;checked:0;T:用户管理;url:"
tree.N["SH8907000000_SH8907020000"] = "ctrl:sel;checked:0;T:组织机构管理;url:xxxxxx.aspx"
tree.N["SH8906000000_SH8906030000"] = "ctrl:sel;checked:1;T:添加新角色;url:xxxxxx.aspx"
tree.N["SH8906030000_SH8906030100"] = "ctrl:sel;checked:1;T:添加新角色;url:xxxxxx.aspx"
tree.N["SH8906000000_SH8906040000"] = "ctrl:sel;checked:1;T:系统角色管理;url:xxxxxx.aspx"
//复选框用法说明：其中“ctrl:sel;”的冒号后面的是复选框的名称(name)属性
//其中“checked:1;”的冒号后面的是0或1，表明复选框是否选中(1为选中,0为不选)
tree.setURL("#");
tree.wordLine = false;
tree.setTarget("main");
document.getElementById("kkk").innerHTML=tree.toString();
tree.expandAll();
//显示所有选中的ID
function showsel()
{
var es=document.getElementsByName("sel");
var out="";
for(var i=0;i<es.length;i++)
{
if (es[i].checked) out+=es[i].value+"\n";
}
alert(out);
}
//-->
</script>
（4）添加一个Input控件，用于测试选中的信息
<input type="button" onclick='showsel()' value='显示选中' />
3.显示结果：
若在程序中使用，其中输出的节点信息可用输入字符串的形式显示就OK了。
下载地址：http://download.csdn.net/download/yangfang00123/2047126
