结合JSON 支持动态从数据库加载节点，支持鼠标右键菜单，支持checkbox 和radio
把数据加载的节点信息保存在下面的类中：
public class Node {
private String text;
private String action;
private String src;
private String icon;
private String openIcon;
private String target;
private int checkboxType;
private boolean isChecked;
private String value;
private String oncontextmenu;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getAction() {
return action;
}
public void setAction(String action) {
this.action = action;
}
public String getSrc() {
return src;
}
public void setSrc(String src) {
this.src = src;
}
public String getIcon() {
return icon;
}
public void setIcon(String icon) {
this.icon = icon;
}
public String getOpenIcon() {
return openIcon;
}
public void setOpenIcon(String openIcon) {
this.openIcon = openIcon;
}
public String getTarget() {
return target;
}
public void setTarget(String target) {
this.target = target;
}
public int getCheckboxType() {
return checkboxType;
}
public void setCheckboxType(int checkboxType) {
this.checkboxType = checkboxType;
}
public boolean getIsChecked() {
return isChecked;
}
public void setIsChecked(boolean isChecked) {
this.isChecked = isChecked;
}
public String getOncontextmenu() {
return oncontextmenu;
}
public void setOncontextmenu(String oncontextmenu) {
this.oncontextmenu = oncontextmenu;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
src ：加载数据库数据URL
action：点击节点上的文字要执行的javascritp事件
text：节点上显示的文字
checkboxType：1=checkbox,2=radio
value : checkbox,radio的值
其他参数根据名字和代码自己研究去例子view.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="/xloadtree/xloadtree/xtree.js"></script>
<script type="text/javascript" src="/xloadtree/xloadtree/xmlextras.js"></script>
<script type="text/javascript" src="/xloadtree/xloadtree/xloadtree.js"></script>
<script type="text/javascript" src="/xloadtree/xloadtree/json_parse.js"></script>
<script type="text/javascript" src="/xloadtree/xloadtree/json2.js"></script>
</head>
<body>
<input type="button" value="确定" onclick="doClose()" ><br>
<script type="text/javascript">
var tree = new WebFXTree("中国");
tree.add(new WebFXLoadTreeItem("云南","/xloadtree/getData.jsp?id=1","javascript:alert('点击事件')",null,null,null,1,"id-1",true,null));
tree.add(new WebFXLoadTreeItem("广东","/xloadtree/getData.jsp?id=2","javascript:alert('点击事件')",null,null,null,1,"id-2",false,null));
document.write(tree);
function doClose(){
var temp=document.getElementsByName("checkbox_id");
for(i=0;i<temp.length;i++){
if(temp[i].checked){
alert(temp[i].value);
}
}
}
</script>
</body>
</html>
取数据的getData.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%
java.util.List<com.Node> list= new java.util.ArrayList<com.Node>();
String id=request.getParameter("id");
com.Node node= new com.Node();
if(id.equals("1")){
node.setAction(null);
node.setText("昆明");
node.setCheckboxType(1);
node.setIsChecked(false);
node.setValue("3");
list.add(node);
}
if(id.equals("2")){
node= new com.Node();
node.setAction(null);
node.setText("深圳");
node.setCheckboxType(1);
node.setIsChecked(true);
node.setValue("4");
list.add(node);
}
net.sf.json.JSONArray json= net.sf.json.JSONArray.fromObject(list);
out.println(json);
%>
对js的源码修改这里就不在解释了，自己去研究
下载工程
分享到：
相关推荐
这些库常被用来展示层级数据，如组织结构、文件目录或者导航菜单等，提供了丰富的交互功能，如复选框（checkbox）和单选按钮（radio），以增强用户体验。下面我们将详细探讨这两个库以及与`ajax`动态加载相关的知识...
### 复选框的且带右键菜单的树代码知识点解析 #### 一、概述 本文档介绍了一段实现带有复选框功能以及右键菜单的树形结构代码。该树形结构主要用于展示联系人信息，并支持用户进行一系列操作如搜索、添加、删除等。...
综上所述，菜单树、右键菜单树和导航树是构建用户友好的界面的关键元素，而checkbox模式和radio模式则为用户提供灵活的选择操作。在实际开发中，理解并熟练运用这些概念和模式，能够提升应用程序的用户体验。同时，...
2. **元素**：表示菜单项，可以设置`label`属性为菜单文本，`type`属性定义命令类型（如`command`、`checkbox`或`radio`），`href`属性指定链接地址。 3. **contextmenu属性**：可以将`<menu>`元素与元素关联，例如`...
这个功能丰富的菜单不仅允许用户通过右键操作进行展开、关闭、选择和反选所有节点，而且在选择上级节点时会自动选择其下级的所有子节点。这种交互方式在许多应用程序中都非常常见，比如文件资源管理器或者复杂的设置...
昨天网上找了很多关于设置select checkbox radio只读的，都没办法满足要求，自己写了一个
在网页设计中，`checkbox` 和 `radio` 是两种常见的表单元素，用于用户进行多选和单选操作。为了提升用户体验和界面美观性，设计师和开发者常常会为这些元素定制自定义样式。本篇文章将深入探讨如何实现“好看的”`...
效果图见 http://blog.csdn.net/xuStanly/archive/2006/09/11/1207222.aspx
这个标题指的是一个定制化的Dtree（可能是自定义的树形控件），该控件不仅支持传统的左键点击操作，还增加了右键菜单功能，同时包含了复选框以供多选操作。 Dtree通常用于显示层次结构的数据，比如文件系统、组织...
本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素，这两种元素在表单提交和用户交互中扮演着重要角色。 首先，让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项，用户可以勾选多个选项；...
修改自meizz的树，这个树确实很强 可加checkbox和radio参考了 http://blog.csdn.net/xustanly/archive/2006/09/11/1207222.aspx
为了让 dtree 支持右键菜单，可以在添加节点时设置节点名称为包含右键事件处理函数的超链接。例如： ```javascript d.add(1, 0, ';" oncontextmenu="rightMouse(1);">Node1</a>'); ``` 接下来是右键菜单的实现代码：...
3. **xloadtree+checkbox+radio**：这个组合意味着xloadtree组件不仅支持Ajax动态加载数据，还同时支持复选和单选功能。用户可以根据需求，通过点击节点旁边的checkbox进行多选操作，或通过radio进行单选操作，这在...
在网页设计中，Checkbox（复选框）和Radio（单选按钮）是常见的用户界面元素，用于收集用户的选择信息。这些元素的外观和交互性对于提升用户体验至关重要。"漂亮的Checkbox Radio漂亮样式"这个主题，主要关注如何...
`checkbox`用于多选，`radio`用于单选，而`select`通常用于下拉菜单选择。然而，由于浏览器的默认样式通常较为简单且统一，设计师和开发者经常需要自定义这些元素的外观以符合网站的整体风格。本教程将详细介绍如何...
在本文中，我们将深入探讨如何使用WPF（Windows Presentation Foundation）技术实现一个具有层次结构的Checkbox树形菜单，以及如何实现右键菜单功能，包括展开所有、关闭所有、选择所有和反选所有。WPF是.NET框架的...
在网页设计中，radio（单选按钮）和checkbox（复选框）是常见的表单元素，用于收集用户数据。然而，这些元素在默认状态下样式较为简单，可能不符合设计师们追求的美观与统一风格的需求。本篇文章将深入探讨如何使用...
一个wpf下的Treeview，节点具体图标，checkbox，和右键菜单功能
在IT行业中，实现“checkbox鼠标拖拽框选”功能是一项常见的交互设计，它极大地提高了用户在操作大量复选框时的效率。这个功能通常应用于文件管理器、数据筛选或者自定义设置等场景，让用户能够通过鼠标拖动快速选择...