主页面：
<script type='text/javascript' src='/scmis/script/simpleHtmlTree.js'></script>
<script language=javascript src="/scmis/script/jquery.js"></script>
<link rel="stylesheet" href="/scmis/css/site.css" type="text/css">
<style>
input{font-size:12px;border:1 solid #000000; background-color:#FFFFFF ; }
</style>
<body >
<table border="1" width="100%" cellpadding="0" cellspacing="0" height="426" class="table1">
<tr>
<td width="29%" height="80%" valign="top"><div id="treepanel1"></div> </td>
<td width="71%" valign="top">
<div></div>
<div id="xmnr"></div>
<div>
<input type="button" name="addzi" onclick="addziNode()" value="添加子项">
<input type="button" name="addfu" onclick="addfuNode()" value="添加同级">
<input type="button" name="save" onclick="saveNode()" value="保存修改">
<input type="button" name="del" onclick="delNode()" value="删除节点">
</div> </td>
</tr>
</table>
<input name="zijd" type="text" value="" />
<input name="fujd" type="text" value="0" />
</body>
<script>
var simpleTree = new SimpleHtmlTree();//构造树
var treeNodePanel = new TreeNodePanel();
treeNodePanel.setTreeNodePanel(0,'数据库');//参数1：节点ID，参数2：节点文本
simpleTree.addTreeNode('treepanel1',treeNodePanel);//添加到 treepanel1 下当节点
simpleTree.nodeClick = function(nodePanel) {
document.getElementById("zijd").value=nodePanel.id;
document.getElementById("fujd").value=nodePanel.getAttribute("parentid");
// alert("节点Id:"+nodePanel.id);
//alert("node's status:"+nodePanel.getAttribute("menutype"));
//alert("node's level:"+nodePanel.getAttribute("level"));
//alert("node's order:"+nodePanel.getAttribute("order"));
//alert("node's parent's id"+nodePanel.getAttribute("parentid"));
//ajax脚本开始
$.ajax({
type: "POST",
url: “jcsjb",
data: "nodePanel="+ nodePanel.id,
success: function(msg){
$("#xmnr").html(msg);
}
});
//ajax脚本结束 fullNode(nodePanel.id)
}
function add(){
try{
var parentId = document.getElementById('parentid').value;
var id = document.getElementById('newid').value;
var text = document.getElementById('nodetext').value;
var treeNodePanel=new TreeNodePanel();
treeNodePanel.setTreeNodePanel(id,text);
simpleTree.addTreeNode(parentId,treeNodePanel);
} catch(e) {
alert(e.message);
}
}
//添加 同级目录
function addfuNode(){
try{
var parentId = document.getElementById('fujd').value;
var id = document.getElementById('zijd').value;
var text = document.getElementById('xlmc').value;
var treeNodePanel=new TreeNodePanel();
//ajax脚本开始------------------------------------------
$.ajax({
type: "POST",
url: "jcsjb_addnode",
data: "nodePanel="+ parentId+"&xlmc="+text,
success: function(msg){
var ziid=jQuery.trim(msg);
treeNodePanel.setTreeNodePanel(jQuery.trim(msg),text);
simpleTree.addTreeNode(parentId,treeNodePanel);
//$("#xmnr").html(msg);
}
});
//ajax脚本结束-------------------------------------
} catch(e) {
alert(e.message);
}
}
//添加 子目录
function addziNode(){
try{
var parentId = document.getElementById('fujd').value;
var id = document.getElementById('zijd').value;
var text = document.getElementById('xlmc').value;
var treeNodePanel=new TreeNodePanel();
//ajax脚本开始------------------------------------------
$.ajax({
type: "POST",
url: "jcsjb_addnode",
data: "nodePanel="+ id+"&xlmc="+text,
success: function(msg){
treeNodePanel.setTreeNodePanel(jQuery.trim(msg),text);
simpleTree.addTreeNode(id,treeNodePanel);
}
});
//ajax脚本结束-------------------------------------
} catch(e) {
alert(e.message);
}
}
//删除节点
function delNode(){
try{
var jied=document.getElementById("zijd").value;
document.getElementById(jied).style.display="none";
} catch(e) {
alert(e.message);
}
}
//保存节点
function saveNode(){
var jied=document.getElementById("zijd").value;
var xlmc=document.getElementById("xlmc").value;
//ajax脚本开始------------------------------------------
$.ajax({
type: "POST",
url: "jcsjb_save",
data: "nodePanel="+ jied+"&xlmc="+xlmc,
success: function(msg){
alert("修改成功");
//$("#xmnr").html(msg);
}
});
//ajax脚本结束-------------------------------------
}
onload=function fullNode(a)
{
//ajax脚本开始------------------------------------------
$.ajax({
type: "POST",
url: "jcsjb_fullnode",
data: "no=0",
success: function(msg){
eval(msg);
}
});
//ajax脚本结束-------------------------------------
}
</script>
java 递归生成节点
public String treeInfo(String fuNode )throws SQLException {
/*
* zr edit
*说明：用来生成javascript 创建树结构的脚本
*/
RecordSet rs = getRecordSet(" select * from tablegy where name='"+fuNode+"' order by id " );
String treePrint="";
int row=rs.rowCount();
if(row==0)
{
return "";
}
else
{
for (int i=1; i<=row; i++ ){
treePrint=treePrint+"node = new TreeNodePanel(); ";
treePrint=treePrint+"node.setTreeNodePanel("+rs.getValue(i,"di")+",\""+rs.getValue(i,"name")+"\"); ";
treePrint=treePrint+"simpleTree.addTreeNode("+fuNode+",node); ";
treePrint=treePrint+treeInfo(rs.getString(i,"id"));
//treePrint=treePrint+rs.getString(i,"id")+"; "+treeInfo(rs.getString(i,"id"));
}
return treePrint ;
}
}
AJAX传值添加节点到数据库
/*省略*/
分享到：
相关推荐
本项目“s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单”就是这样一个解决方案，它整合了多种技术来实现这一功能。 首先，我们来看“s2sh”。这是Struts2、Spring和Hibernate三者的简称，它们分别是MVC...
本主题介绍了一种不依赖递归的高效方法来创建无限级树型菜单，具有快速加载的特点。 首先，我们来看`WriteXML.ashx`，这是一个HTTP Handler，可能用于动态生成XML数据。在不使用递归的情况下，我们可以利用迭代的...
在IT行业中，构建一个无限级树菜单是常见的需求，特别是在数据层级结构复杂的应用场景中，如组织架构、产品分类或文件目录等。本项目利用Java技术栈，结合Struts和Hibernate框架，实现了这一功能。下面将详细介绍这...
内容索引:脚本资源,jQuery,Tree,树形菜单 jQuery Simple Tree Ajax无限级树形菜单插件，兼容性非常好，可异步加载，支持拖拽。插件本身只支持HTML节点加载的，网上有人进行扩展了，用了JSON，不过个人感觉这对速度...
在IT领域，构建一个无限级动态树状菜单是一项常见的需求，尤其在网站管理、权限控制、数据分类等场景中。本项目使用了JSP、JavaBean以及数据库技术来实现这一功能，下面将详细讲解其中涉及的关键知识点。 1. **JSP...
在Java编程中，构建无限级分类树形结构是一项常见的任务，尤其在数据管理、文件系统或者网站导航等场景中。本教程将介绍如何利用Java来实现这种功能，并结合MySQL数据库进行数据存储，同时通过AJAX技术实现页面的...
在IT领域，jQuery dTree是一种常用的JavaScript库，用于创建交互式的树形菜单。这个实例着重展示了如何利用jQuery dTree动态地构建一个无限层级的树形菜单，并实现基本的数据操作功能，包括添加、删除、修改和查询。...
1. **递归加载**：无限级树形菜单的关键在于递归加载子节点。当用户点击一个父节点时，通过Ajax请求获取其子节点，然后在当前节点下动态插入这些子节点。如果子节点还有子节点，就继续这个过程，直到没有更多子节点...
在网站开发中，这种无限级分类目录树通常用于文件管理、产品分类、菜单导航等场景，使用户能够方便地浏览和操作层次结构复杂的组织数据。 JSP（JavaServer Pages）是Java Web开发中的一个重要组成部分，它是一种...
在Web开发中，无限级分类目录树常常用于网站的导航菜单、文件管理系统或者组织结构展示等场景，能够帮助用户以层级结构清晰地浏览和操作大量数据。 【描述】：这个压缩包提供的“_sorttree”可能是包含了一个JSP...
查询无限级树形菜单需要使用递归查询。在SQL中，可以通过自连接和递归公共表表达式（CTE）来实现。例如，使用MySQL的WITH语句可以构造一个递归查询来获取所有子节点。 3. **编程实现**： 一旦从数据库获取了树...
**jQuery 实现无限极树表格菜单详解** 在网页开发中，树形结构的展示经常用于组织和层次化数据，如目录、组织架构或层级关系的数据。jQuery 是一个广泛使用的 JavaScript 库，它提供了丰富的功能来简化网页交互。...
无限级树的实现关键在于递归和遍历算法，通过遍历节点并递归地处理子节点，可以构建出任意深度的树。 3. **Demo特点** "js无限级tree_demo简单_易用"强调了简单和易用性，这意味着这个示例代码应该具有以下特点： ...
《jQuery树形多级下拉菜单的实现与应用》 在网页设计中，为了提供用户友好的导航体验，树形多级下拉菜单是一种常见且有效的解决方案。"jQuery树形多级下拉菜单"就是这样一款实用的代码资源，它允许开发者创建具有...
在ASP.NET开发中，构建无限级树形菜单是一项常见的需求，尤其在管理界面或数据展示时，这样的设计能提供清晰的层次结构。"坏孩子无限级树型菜单_aspx开发教程"是一个指导如何在ASP.NET环境中创建这样功能的资源。在...
本篇文章将详细探讨如何利用后端Flask框架生成一个无限级的侧边栏树形菜单，并介绍与之相关的前端设计和代码组织技巧。 首先，Flask是一个轻量级的Python Web服务器网关接口（WSGI）应用框架，它的简洁性和易用性使...
- **jQuery插件**：可选择性地使用现成的jQuery树形菜单插件，如`jstree`, `treeview`等，或者自定义jQuery脚本来实现无限级展开/折叠功能。 ### 3. 自定义jQuery脚本 1. **初始化**：加载页面时，遍历所有顶级...
本文将深入探讨如何利用jQuery在ASP.NET环境中开发无限级的树形菜单，这是一种常见的用户界面元素，尤其适用于展示层级结构的数据。 首先，让我们了解树形菜单的基本概念。树形菜单是一种具有层次结构的导航组件，...
无限级导航菜单的核心在于递归算法，通过自我调用来处理任意深度的子级菜单。以下将详细解释这个过程： 1. 数据库设计：首先，我们需要一个存储菜单数据的数据库表。通常包含`id`（主键）、`parent_id`（父ID，用于...
在实际项目中，可以利用现有的JavaScript库和框架，如jQuery、React、Vue或Angular，它们提供了丰富的工具和组件来简化无限级菜单的开发。例如，使用React，你可以创建一个可复用的Tree组件，利用虚拟DOM提高性能。 ...