xloadtree
是一个非常优秀的树控件
,
而我们最常用的也就是与数据库相结合生成树菜单
:
方式之一;
xloadtree.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XLoadTree Demo (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="xtree.js"></script>
<script type="text/javascript" src="xmlextras.js"></script>
<script type="text/javascript" src="xloadtree.js"></script>
<link type="text/css" rel="stylesheet" href="xtree.css" />
<style type="text/css">
body {
background: white;
color: black;
}
</style>
</head>
<body>
<script type="text/javascript">
/// XP Look
webFXTreeConfig.rootIcon = "images/xp/folder.png";
webFXTreeConfig.openRootIcon = "images/xp/openfolder.png";
webFXTreeConfig.folderIcon = "images/xp/folder.png";
webFXTreeConfig.openFolderIcon = "images/xp/openfolder.png";
webFXTreeConfig.fileIcon = "images/xp/file.png";
webFXTreeConfig.lMinusIcon = "images/xp/Lminus.png";
webFXTreeConfig.lPlusIcon = "images/xp/Lplus.png";
webFXTreeConfig.tMinusIcon = "images/xp/Tminus.png";
webFXTreeConfig.tPlusIcon = "images/xp/Tplus.png";
webFXTreeConfig.iIcon = "images/xp/I.png";
webFXTreeConfig.lIcon = "images/xp/L.png";
webFXTreeConfig.tIcon = "images/xp/T.png";
var rti;
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "getmainmenu.jsp"));
document.write(tree);
</script>
</body>
</html>
getmainmenu.jsp
<%@page import="com.zb.database.service.*,
com.zb.database.entity.*,
java.util.List"%>
<%
MenuService menus = new MenuService();
List list = menus.getMenuList();
Menu menu;
response.setContentType("text/xml");
out.clear();
out.println("<?xml version='1.0' encoding='utf-8'?>");
out.println("<tree>");
for (int i=0; i<list.size(); i++)
{
menu = (Menu) list.get(i);
out.println("<tree text='"+menu.getMenuName()+"' src='submenu.jsp?id="+menu.getId()+"' />");
}
out.println("</tree>");
%>
submenu.jsp
<%@page import="com.zb.database.util.*,
com.zb.database.service.*,
com.zb.database.entity.*,
java.util.List"%>
<%
String id=request.getParameter("id");
int pid=Integer.parseInt(id);
response.setContentType("text/xml");
//out.println("<?xml version=/"1.0/" encoding=/"utf-8/"?>");
out.println("<tree>");
MenuService menus = new MenuService();
List list = menus.getSubMenuList(pid);
Menu menu;
for (int i=0; i<list.size(); i++)
{
menu = (Menu) list.get(i);
out.println("<tree text='"+menu.getMenuName()+"' />");
}
out.println("</tree>");
%>
方式之一;
xloadtree.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XLoadTree Demo (WebFX)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="xtree.js"></script>
<script type="text/javascript" src="xmlextras.js"></script>
<script type="text/javascript" src="xloadtree.js"></script>
<link type="text/css" rel="stylesheet" href="xtree.css" />
<style type="text/css">
body {
background: white;
color: black;
}
</style>
</head>
<body>
<script type="text/javascript">
/// XP Look
webFXTreeConfig.rootIcon = "images/xp/folder.png";
webFXTreeConfig.openRootIcon = "images/xp/openfolder.png";
webFXTreeConfig.folderIcon = "images/xp/folder.png";
webFXTreeConfig.openFolderIcon = "images/xp/openfolder.png";
webFXTreeConfig.fileIcon = "images/xp/file.png";
webFXTreeConfig.lMinusIcon = "images/xp/Lminus.png";
webFXTreeConfig.lPlusIcon = "images/xp/Lplus.png";
webFXTreeConfig.tMinusIcon = "images/xp/Tminus.png";
webFXTreeConfig.tPlusIcon = "images/xp/Tplus.png";
webFXTreeConfig.iIcon = "images/xp/I.png";
webFXTreeConfig.lIcon = "images/xp/L.png";
webFXTreeConfig.tIcon = "images/xp/T.png";
var rti;
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "getmainmenu.jsp"));
document.write(tree);
</script>
</body>
</html>
getmainmenu.jsp
<%@page import="com.zb.database.service.*,
com.zb.database.entity.*,
java.util.List"%>
<%
MenuService menus = new MenuService();
List list = menus.getMenuList();
Menu menu;
response.setContentType("text/xml");
out.clear();
out.println("<?xml version='1.0' encoding='utf-8'?>");
out.println("<tree>");
for (int i=0; i<list.size(); i++)
{
menu = (Menu) list.get(i);
out.println("<tree text='"+menu.getMenuName()+"' src='submenu.jsp?id="+menu.getId()+"' />");
}
out.println("</tree>");
%>
submenu.jsp
<%@page import="com.zb.database.util.*,
com.zb.database.service.*,
com.zb.database.entity.*,
java.util.List"%>
<%
String id=request.getParameter("id");
int pid=Integer.parseInt(id);
response.setContentType("text/xml");
//out.println("<?xml version=/"1.0/" encoding=/"utf-8/"?>");
out.println("<tree>");
MenuService menus = new MenuService();
List list = menus.getSubMenuList(pid);
Menu menu;
for (int i=0; i<list.size(); i++)
{
menu = (Menu) list.get(i);
out.println("<tree text='"+menu.getMenuName()+"' />");
}
out.println("</tree>");
%>
方式之二:
通过
Betwit
组件将
javaBean
生成
xml.
import java.util.ArrayList;
import java.util.List;
public class TreeBean {
private String text;
private String action;
private String src;
private List list=new ArrayList();
public String getAction() {
return action;
}
public void setAction(String action) {
this.action = action;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getSrc() {
return src;
}
public void setSrc(String src) {
this.src = src;
}
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
public void addBean(TreeBean t){
this.list.add(t);
}
}
TreeBean.betwit
TreeBean.betwit
<info primitiveTypes="element">
<element name="tree" >
<attribute name="text" property="text"/>
<attribute name="action" property="action"/>
<attribute name="src" property="src"/>
<element name="tree" property="list" class='TreeBean' />
</element>
</info>
import java.awt.List;
import java.io.StringWriter;
import java.util.ArrayList;
import org.apache.commons.betwixt.io.BeanWriter;
public class WriteExampleApp {
/**
* Create an example bean and then convert it to xml.
*/
public static void main(String [] args) throws Exception {
// Start by preparing the writer
// We'll write to a string
StringWriter outputWriter = new StringWriter();
// Betwixt just writes out the bean as a fragment
// So if we want well-formed xml, we need to add the prolog
outputWriter.write("<?xml version='1.0' ?>");
outputWriter.write("<tree>");
// Create a BeanWriter which writes to our prepared stream
BeanWriter beanWriter = new BeanWriter(outputWriter);
// Configure betwixt
// For more details see java docs or later in the main documentation
beanWriter.getXMLIntrospector().getConfiguration().setAttributesForPrimitives(false);
beanWriter.getBindingConfiguration().setMapIDs(false);
beanWriter.enablePrettyPrint(); //
启用缩进格式
.
beanWriter.setEndTagForEmptyElement(true);
// beanWriter.setIndent("/t");
beanWriter.writeXmlDeclaration("");
// NoteBean test=new NoteBean();
// test.setToWho("fdfdf");
// test.setFromWho("frof");
// test.setTitle("tesdd");
// test.setNote("fdfddf");
// for(int i=0; i<5;i++){
TreeBean test=new TreeBean();
test.setText("aa");
test.setSrc("test.xml");
test.setAction("ba");
TreeBean test1=new TreeBean();
test1.setText("aa1");
test1.setSrc("test.xml1");
test1.setAction("ba1");
TreeBean test2=new TreeBean();
test2.setText("aa2");
test2.setSrc("test.xml1");
test2.setAction("ba1");
test.addBean((test1));
test.addBean((test2));
// If the base element is not passed in, Betwixt will guess
// But let's write example bean as base element 'person'
beanWriter.write( "tree",test);
beanWriter.write( "tree",test1);
//beanWriter.
//}
// Write to System.out
// (We could have used the empty constructor for BeanWriter
// but this way is more instructive)
outputWriter.append("</tree>");
System.out.println(outputWriter.toString());
// Betwixt writes fragments not documents so does not automatically close
// writers or streams.
// This example will do no more writing so close the writer now.
outputWriter.close();
}
}
方式之三 ( 采用扩展后 xtree.js ,很好可以直接带上 checkbox 或 radio)
方式之三 ( 采用扩展后 xtree.js ,很好可以直接带上 checkbox 或 radio)
具体
js
用途:
xtree.js :静态加载,最普通的树型结构,在页面上写js
xloadtree.js: 动态加载,从xml中加载xml结点信息
checkboxXLoadTree.js 动态加载, 树型结构会有多选框。
radioXLoadTree.js
动态加载, 树型结构会有单选框。
checkboxTreeItem.js
带有checkbox多结点
radioTreeItem.js
带有radio多结点
例子分析:
1. <script language="javascript">
webFXTreeConfig.setImagePath("js/images/");
//
这样省去一个个的设置
var tree = new WebFXTree("所有权限", "alert('树根')");
//
新建一个变通的
tree
//WebFXTree([text], [action], [behavior]) text,
结点名,链接,
tree.setColor("red");
var L1 = new WebFXTreeItem("公路路况",'');
//
新建结点
//new WebFXTreeItem([text], [action], [parent], [icon], [openIcon])
L11 = new WebFXTreeItem("路基",'');
L1.add(L11); //
可以在任何地方调用
add
方法加入子节点。
//
也可以使用构造函数传入父节点。
L111 = new WebFXTreeItem("新增路基","JavaScript:alert('新增路基')", L11);
L112 = new WebFXTreeItem("API 帮助","xTree API.html", L11);
L113 = new WebFXTreeItem("删除路基",null, L11);
var L2 = new WebFXTreeItem("桥梁管理","javascript:alert('桥梁管理')");
var L21 = new WebFXTreeItem("桥梁管理","javascript:alert('桥梁管理')", L2);
tree.add(L1); // 可以在任何地方调用add方法加入子节点。
tree.add(L2); // 可以在任何地方调用add方法加入子节点。
var nodeA = new WebFXTreeItem("设置名称的节点");
nodeA.setId("nodeA"); // example for using setId() method.
nodeA.setColor("red");
tree.add(nodeA);
</script>
2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script language="javascript" src="js/xtree.js"></script>
<script language="javascript" src="js/map.js"></script>
<script language="javascript" src="js/checkboxTreeItem.js"></script>
<script language="javascript" src="js/radioTreeItem.js"></script>
<link type="text/css" rel="stylesheet" href="js/xtree.css" />
</head>
<script language="javascript">
webFXTreeConfig.setImagePath("js/images/");
var d1 = new Date();
var tree = new WebFXTree("所有权限","");//WebFXTree
//WebFXCheckBoxTreeItem
WebFXTreeItem WebFXRadioTreeItem
var L1 = new WebFXTreeItem("公路路况","gl", tree);
var L11;
var I=5, J=300, K=60;
for(var i=I; i>0; i--){
L11 = new WebFXTreeItem("节点"+i, "value" + i, L1); /
/
普通结点
for(var k=K; k>0; k--){
var s = "_" + i + "_" + k;
new WebFXCheckBoxTreeItem("节点"+ s, "value" + s, L11);
//
带有
checkbox
}
}
var L2 = new WebFXTreeItem("桥梁管理","ql", tree);
for(var j=J; j>0; j--){
new WebFXRadioTreeItem("节点"+j, "value" + j, L2);
带有
radio
}
</script>
<body>
<input type="button" value="button" οnclick="test()"><br><br>
<div id="div_test" border='1'></div>
<hr>
</body>
<script>
document.write(tree);
tree.expand();
var d2 = new Date();
var str = "节点数: " + (I*K + J) ;
str += " 花费时间:" + (d2.getTime() - d1.getTime())/1000 + " 秒"
document.all.div_test.innerHTML = str;
</script>
<script language="JavaScript">
<!--
function test(){
var values = getCheckValues();
//
获取所有的选中
CheckBox
的值,返回值是数组
.
var str = getCheckTexts(true);
//
获取所有的选中
CheckBox
的文本,返回值是数组
// includeDisabled
是否包括
disabled
状态的
CheckBox,
默认值是
false.
alert(str);
//alert(getCheckObjects());
//
获取所有的选中的对象,对象的属性有:
id, text, value
,返回值是数组
}
setCheckBox('ql', true, false);
设置值等于
value
的
CheckBox
的选中状态
. recursive:
是否递归,缺省为
false.
disableCheckBox("ql",true, false);
//visiableCheckBox(false);
//visiableCheckBox(true);
//-->
</script>
</html>
3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link type="text/css" rel="stylesheet" href="js/xtree.css" />
<script language="javascript" src="js/map.js"></script>
<script language="javascript" src="js/xtree.js"></script>
<script language="javascript" src="js/xloadtree.js"></script>
<script language="javascript" src="js/checkboxTreeItem.js"></script>
<script language="javascript" src="js/xmlextras.js"></script>
<script language="javascript" src="js/checkboxXLoadTree.js"></script>
<script language="javascript" src="js/radioTreeItem.js"></script>
<script language="javascript" src="js/radioXLoadTree.js"></script>
</head>
<script language="javascript">
webFXTreeConfig.setImagePath("js/images/");
var tree = new WebFXTree ("所有权限","");//WebFXTree
var L1 = new WebFXCheckBoxTreeItem("公路路况","1", tree);
L11 = new WebFXCheckBoxTreeItem("路基","2", L1);
L113 = new WebFXLoadCheckBoxTreeItem("删除路基","ss","items.xml", L1);
//
WebFXLoadCheckBoxTreeItem(sText, sValue, sXmlSrc, eParent, sIcon, sOpenIcon, bChecked, disabled)
var L2 = new WebFXCheckBoxTreeItem("桥梁管理","5", tree);
var L21 = new WebFXLoadCheckBoxTreeItem("动态加载子节点1","ddd","items.xml", L2);
</script>
<body>
<input type="button" value="button" οnclick="test()"><br>
<div id="div_test"></div>
</body>
<script>
document.write(tree);
tree.expand();
</script>
</html>
<script language="JavaScript">
<!--
function test(){
var values = getCheckValues();
for(var i=0; i<values.length; i++){
//alert(getCheckText(values[i]));
}
var str = (getCheckTexts(true));
alert(str);
alert(getCheckObjects());
}
L1.onchange = doClickNodeCheckBox;
L11.onchange = doClickNodeCheckBox;
L113.onchange = doClickNodeCheckBox;
function doClickNodeCheckBox(){
// 定义成 doClickNodeCheckBox(name, value, checked) 也可。
var name = arguments[0]; // 第一个参数。
var value = arguments[1]; // 第二个参数。
var checked = arguments[2]; // 第三个参数。
if(checked){
alert("你选中了节点:" + name + "-" + value);
}else{
alert("你取消了节点选择:" + name + "-" + value);
}
}
//setCheckBox("1",true, true);
//disableCheckBox("1",true, true);
//-->
</script>
Items.xml:
<?xml version="1.0" encoding="gb2312" ?>
<tree>
<tree id="mynode" text="节点1" value="href://webfx.eae.net" myAttr="myAttr_Value"/> <!-- 没有指定type属性,与它父节点的类型相同。 -->
<tree text="动态加载子节点2" value="11" src="itemb.xml" disabled="true" type="radio" id="11" color="green">
<tree text="节点 21" value="ddddddddddd" disabled="false"/>
</tree>
<tree text="节点3" value="13" type="check" id="any_string" color="#FF0000" οnchange="doClickNodeCheckBox">
</tree>
<tree text="节点4" value="4444" src="no_item.xml" type="radio" id="id_value" color="blue" οnchange="doClickNodeRadio">
<tree text="节点 2" value="value:fff" disabled="true"/>
<tree text=""递归加载"" src="items.xml" value="fdafsdfasfd"/>
</tree>
<tree text="节点5" value="gggggggg" id="id_value5" color="red"/>
</tree>
<tree>
中的属性说明:
Type=check
或
radio
表示多选框或单选框
,
还有
normal,
当不指定
type
属性时,节点的类型与它的父节点类型相同。
disabled="false" 表示是否可操作
cascadeCheck
定义
CheckBox
树是否级联选择,即改变当前节点的
Check
状态时,是否影响其子节点和父节点的
Check
状态;
注意:动态加载xml,要在web server下运行。