关于梅花雪的js树

最近一段时间，为了学习java，天天在看别人的框架，为了实现一颗树，找到了一个改写梅花雪的js，下面是一个基本的结构

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'MyJsp.jsp' starting page</title>

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

</head>

<body>

<h3>MzTreeView + CheckBox 复选框 + 自定义表格演示 (MzTreeView v1.2 www.lxasp.com 修改版)</h3>

<!--

//var MzTreeViewTH="<table class='MzTreeViewRow'><tr><td class='MzTreeViewCell0'>";

//var MzTreeViewTD="\"</td><td class='MzTreeViewCell1'>\"+ sid +\"</td></tr></table>\"";

window.tree = new MzTreeView("tree");

tree.icons["property"] = "property.gif";

tree.icons["css"] = "collection.gif";

tree.icons["event"] = "collection.gif";

tree.icons["book"] = "book.gif";

tree.iconsExpand["book"] = "bookopen.gif"; //展开时对应的图片

tree.setIconPath("/HAS/info/images/treeimages/"); //可用相对路径

tree.N["0_SH8900000000"] = "ctrl:sel;checked:1;T:系统管理;"

tree.N["SH8900000000_SH8901000000"] = "ctrl:sel;checked:1;T:文书模板管理"

tree.N["SH8900000000_SH8902000000"] = "ctrl:sel;checked:0;T:自定义流程管理"

tree.N["SH8900000000_SH8903000000"] = "ctrl:sel;checked:1;T:质量考核因素"

tree.N["SH8900000000_SH8904000000"] = "ctrl:sel;checked:1;T:节假日管理"

tree.N["SH8900000000_SH8905000000"] = "ctrl:sel;checked:1;T:事项管理"

tree.N["SH8900000000_SH8906000000"] = "ctrl:sel;checked:1;T:用户及权限管理"

tree.N["SH8900000000_SH8907000000"] = "ctrl:sel;checked:1;T:组织机构管理"

tree.N["SH8906000000_SH8906010000"] = "ctrl:sel;checked:1;T:添加新用户"

tree.N["SH8907000000_SH8907010000"] = "ctrl:sel;checked:1;T:添加组织机构"

tree.N["SH8906000000_SH8906020000"] = "ctrl:sel;checked:0;T:用户管理"

tree.N["SH8907000000_SH8907020000"] = "ctrl:sel;checked:0;T:组织机构管理"

tree.N["SH8906000000_SH8906030000"] = "ctrl:sel;checked:1;T:添加新角色"

tree.N["SH8906000000_SH8906040000"] = "ctrl:sel;checked:1;T:系统角色管理"

tree.setURL("#");

tree.wordLine = false;

tree.setTarget("main");

document.getElementById("kkk").innerHTML=tree.toString();

tree.expandAll();

//alert(document.getElementsByTagName("head")[0].innerHTML);

//alert(document.getElementById("kkk").innerHTML);

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>

<p>

</p>

</body>

</html>

部门表结构：
编号名称上级
bianhao mingcheng shangji

在action中

/**

* 得到部门

* @param mapping

* @param form

* @param request

* @param response

* @return

public ActionForward getBuMen(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response)

{

// 实现注入

UserManagerService userManagerService = GlobalService.getUserManagerService();

List list=userManagerService.getBuMen();

Bumen bm=new Bumen();

StringBuffer str=new StringBuffer();

//图片路径

str.append("tree.setIconPath('/HAS/info/images/treeimages/');");

str.append("\n");

Iterator iterator = list.iterator();

while(iterator.hasNext())

{

try{

Object[] obj = (Object[])iterator.next();

String bianhao = obj[0].toString();

String mingcheng = obj[1].toString();

String shangji = obj[2].toString();

bm.setBianhao(bianhao);

bm.setMingcheng(mingcheng);

bm.setShangji(shangji);

}

catch(Exception e){

e.printStackTrace();

}

if(bm.getBianhao().substring(1,12).equals("00000000000"))

{

str.append("tree.N['0");

str.append("_");

str.append(bm.getBianhao());

str.append("']");

str.append("=");

str.append("'ctrl:sel;checked:0;T:"+bm.getMingcheng()+"'");

str.append("\n");

}

else

{

str.append("tree.N['");

str.append(bm.getShangji());

str.append("_");

str.append(bm.getBianhao());

str.append("']");

str.append("=");

str.append("'ctrl:sel;checked:0;T:"+bm.getMingcheng()+"'");

str.append("\n");

}

//第二种用法

// for(int i = 0; i < list.size(); i++)

// {

// Bumen bm = (Bumen)list.get(i);

// if(bm.getBianhao().substring(1,12).equals("00000000000"))

// {

// str.append("tree.N['0");

// //str.append(bm.getShangji());

// str.append("_");

// str.append(bm.getBianhao());

// str.append("']");

// str.append("=");

// str.append("'ctrl:sel;checked:0;T:"+bm.getMingcheng()+"'");

// str.append("\n");

// }

// else

// {

// str.append("tree.N['");

// str.append(bm.getShangji());

// str.append("_");

// str.append(bm.getBianhao());

// str.append("']");

// str.append("=");

// str.append("'ctrl:sel;checked:0;T:"+bm.getMingcheng()+"'");

// str.append("\n");

// }

}

str.append("tree.setURL('#');");

str.append("\n");

str.append("tree.wordLine=false;");

str.append("\n");

str.append("tree.setTarget('main');");

str.append("\n");

request.setAttribute("BUMENTREE", str);

request.setAttribute("LISTBUMEN", list);

return mapping.findForward("bumen");

}

其中是使用dao的注入方式，来得到部门

js下载地址：
http://www.cnbolgs.com/Files/huazi4995/MzTreeView12.js

posted on 2007-11-03 22:49 huazi4995 阅读(3479) 评论(3) 编辑收藏举报