扩展xtree内容如checkbox,radio.doc

来源：互联网发布：js函数的形参和实参编辑：程序博客网时间：2024/05/27 09:47

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>");
%>

方式之二：

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

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

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

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

<html>

<head>

<title> New Document </title>

</head>

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>

<hr>

</body>

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>

<!--

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>

</head>

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>

</body>

document.write(tree);

tree.expand();

</script>

</html>

<!--

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>

</tree>

</tree>

</tree>

<tree> 中的属性说明：

Type=check 或radio表示多选框或单选框 ,还有normal, 当不指定type属性时，节点的类型与它的父节点类型相同。

disabled="false" 表示是否可操作

cascadeCheck定义CheckBox树是否级联选择，即改变当前节点的Check状态时，是否影响其子节点和父节点的Check状态；

注意：动态加载xml，要在web server下运行。