- 浏览: 306329 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
jakejone:
起作用了,谢谢啦
java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date -
BadBoyPgm:
不错 工作中刚好用到 看看知道怎么回事
ServletContextListener 应用 -
ifox:
不错哦,这个有用。找了好久呢、
struts2 iterator status index -
输入法:
上面书籍里有详细介绍?
js 获取select option 值 value text -
feihuale:
不错。。。真好,,,,学习了。。。
The error occurred while applying a parameter map.
经过几天的努力终于完成一个动态读取json数据的简单目录树js控件了,分享一下基础代码(最后更新2008-05-23):
---------------
Tree.js
---------------
function $(id)
{
return document.getElementById(id);
}
var rootid = "";//根节点的全局变量
/*
*
* 解析树
*
*/
function parseTree(responseText)
{
var data = eval('(' + responseText + ')');
//var data = responseText;
var texttmp = data[0].text;
var urltmp = data[0].url;
rootid = data[0].id;
addTreeRoot(texttmp,urltmp,rootid);
parseTreeNode(data[0]);
}
var Nodedepth = 1;//节点深度的全局变量
/*
*
* 解析节点
*
*/
function parseTreeNode(dataObject)
{
var subDataObjects = dataObject.children;
for (var i = 0; subDataObjects != null && i < subDataObjects.length; i++)
{
var subDataObject = subDataObjects[i];
var texttmp = subDataObject.text;
var idtmp = subDataObject.id;
var urltmp = subDataObject.url;
var parentidtmp = dataObject.id;
var lastNode = false;
if(parentidtmp==rootid)
{
Nodedepth = 1;//如果父节点为根节点则把Nodedepth设为1
}
if(typeof(subDataObject.children)!="undefined")
{
addTreeNode(texttmp,urltmp,idtmp,Nodedepth,parentidtmp,lastNode);
Nodedepth = Nodedepth + 1;//如果有子节点则Nodedepth加1
}
else
{
lastNode = true;
addTreeNode(texttmp,urltmp,idtmp,Nodedepth,parentidtmp,lastNode);
if(!subDataObjects[i+1])
{
Nodedepth = Nodedepth - 1;//如果没有子节点和同级后面的节点则Nodedepth减1
}
}
parseTreeNode(subDataObject);//递归函数,这里是核心代码
}
}
var tmpDiv = null;//创建新的div对象的全局变量
/*
*
* 添加根节点
*
*/
function addTreeRoot(texttmp,urltmp,idtmp)
{
tmpDiv = document.createElement("div");
tmpDiv.className = "div0";
tmpDiv.innerHTML= "<a href='"+urltmp+"' target='_self' onclick='controlNode(\""+idtmp+"\")'>"+texttmp+"</a>";
tmpDiv.id = idtmp;
container.appendChild(tmpDiv);
}
/*
*
* 添加子节点
*
*/
function addTreeNode(texttmp,urltmp,idtmp,Nodedepth,parentidtmp,lastNode)
{
var treeRoot = document.getElementById(parentidtmp);
tmpDiv = document.createElement("div");
tmpDiv.id = idtmp;
if(parentidtmp==rootid)
{
tmpDiv.className = "div"+Nodedepth;
if(document.all)
{
tmpDiv.style.display = "";
}
else
{
tmpDiv.style.display = "table";
}
tmpDiv.innerHTML= "<a href='"+urltmp+"' target='_self' onclick='controlNode(\""+idtmp+"\")'>"+texttmp+"</a>";
}
else if(!lastNode)
{
tmpDiv.className = "div3 div"+Nodedepth;
tmpDiv.style.display = "none";
tmpDiv.innerHTML= "<a href='"+urltmp+"' target='_self' onclick='controlNode(\""+idtmp+"\")'>"+texttmp+"</a>";
}
else
{
tmpDiv.className = "div3 div"+Nodedepth;
tmpDiv.style.display = "none";
tmpDiv.innerHTML= "<a href='"+urltmp+"' target='_blank'>"+texttmp+"</a>";
}
treeRoot.appendChild(tmpDiv);
}
/*
*
* 控制节点的打开关闭
*
*/
function controlNode(idtmp)
{
var NodeParent = document.getElementById(idtmp);
var tag = NodeParent.getElementsByTagName("div");
var len = tag.length;
if(tag[0].style.display == ""||tag[0].style.display == "table")
{
closeNode(tag,len);
}
else
{
expandNode(tag,len);
}
}
/*
* 关闭子节点
*/
function closeNode(tag,len)
{
for(var i = 0; i < len; i++)
{
var NodeID = document.getElementById(tag[i].id);
var NodeTag = NodeID.getElementsByTagName("div");
var NodeLen = NodeTag.length;
if(NodeLen!=0)
{
tag[i].style.display = "none";
i = i + NodeLen;
}
else
{
tag[i].style.display = "none";
}
}
}
/*
* 打开子节点
*/
function expandNode(tag,len)
{
for(var i = 0; i < len; i++)
{
var NodeID = document.getElementById(tag[i].id);
var NodeTag = NodeID.getElementsByTagName("div");
var NodeLen = NodeTag.length;
if(NodeLen!=0)
{
for(var j = 0; j < NodeLen; j++)
{
NodeTag[j].style.display = "none";
}
//if(getOs()=="MSIE")
if(document.all)
{
tag[i].style.display = "";
}
else
{
tag[i].style.display = "table";
}
i = i + NodeLen;
}
else
{
//if(getOs()=="MSIE")
if(document.all)
{
tag[i].style.display = "";
}
else
{
tag[i].style.display = "table";
}
}
}
}
/*
*
* 判断浏览器类型
*
*/
function getOS()
{
if(navigator.userAgent.indexOf("MSIE")>0)
{
return "MSIE";
}
else if(isFirefox = navigator.userAgent.indexOf("Firefox")>0)
{
return "Firefox";
}
else if(isSafari = navigator.userAgent.indexOf("Safari")>0)
{
return "Safari";
}
else if(isCamino = navigator.userAgent.indexOf("Camino")>0)
{
return "Camino";
}
else if(isMozilla = navigator.userAgent.indexOf("Gecko/")>0)
{
return "Gecko";
}
else
{
return "";
}
}
----------------
tree.html
----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>tree</title>
<style type="text/css">
<!--
a,area { blr:expression(this.onFocus=this.blur()) } /* for IE */
:focus { outline: none; } /* for Firefox */
a:link
{
color:#ff3031; TEXT-DECORATION: none;
}
a:visited
{
color: #ff3031; TEXT-DECORATION: none;
}
a:hover
{
color:green; TEXT-DECORATION:underline;
}
a:active
{
color:green; TEXT-DECORATION: none;
}
#container
{
position: absolute; left: 145px; top: 30px; width: 200px;height:400px;
overflow-y:auto;overflow-x:auto;vertical-align:middle;
background:#000000;color: #ff3031;font-family: "宋体";font-size:12px;
}
.divline
{
padding-left:12px;padding-top:4px;padding-bottom:4px;
text-align:left;
}
#root
{
padding-left:12px;padding-top:4px;padding-bottom:4px;
text-align:left;
}
.div0
{
width:80px;padding-left:12px;
white-space:nowrap;
}
.div1
{
width:80px;padding-left:12px;
white-space:nowrap;
}
.div2
{
width:80px;padding-left:12px;
height:15px;white-space:nowrap;
/*display:none;*/
}
.div3
{
width:80px;padding-left:12px;
height:15px;white-space:nowrap;
}
.false
{
color: #FF0000;
}
.success
{
color: green;
}
-->
</style>
<script type="text/javascript" src="Ajax.js"></script>
<script type="text/javascript" src="Tree.js"></script>
</head>
<body>
<div id="container"> </div>
<script type="text/javascript">
var TimeoutHandler = null;
var container = document.getElementById("container");
function init()
{
clearTimeout(TimeoutHandler);
try
{
Ajax.sendGetRequest("TreeData.jsp",true,"callbackAjax(ME)");
}catch(e)
{
alert(e);
}
//TimeoutHandler = setTimeout ("init()", 2000);
}
function callbackAjax(ajaxHandler)
{
parseTree(ajaxHandler.http_request.responseText);
try
{
ajaxHandler.http_request_handler.http_request.abort ();
ajaxHandler.http_request_handler.flag = 0;
}
catch (e) {}
}
//调用初始化方法
init();
</script>
</body>
</html>
----------------
TreeData.jsp
----------------
<%@ page contentType="text/html; charset=gbk" language="java" errorPage="" %>
<%@ page language="java" import="java.io.PrintWriter"%>
<%
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("gbk");
PrintWriter xmlout = response.getWriter();
int start = 0;
int limit = 10;
int limit2 = 10;
int limit3 = 10;
int depth1 = 5;
//int limit = (int) (Math.random() * 10*10);
//System.out.println(limit);
String url = "http://www.baidu.com";
//String target = "_blank";
StringBuffer sb = new StringBuffer();
sb.append("[{'text':'根节点','id':'root','url':'javascript:void(0)','depth':'0',");
sb.append("'children':[{'text':'招商研究','id':'study','url':'javascript:void(0)','depth':'1',");
sb.append("'children':[");
for (int i=start;i<limit;i++)
{
sb.append("{'text':'");
if(Math.floor(Math.random() * 100)>50)
{
sb.append("个股研究");
}
else
{
sb.append("大盘研究");
}
sb.append("','id':'");
sb.append("studyNode");
sb.append(i);
sb.append("','url':'javascript:void(0)");
//sb.append(url);
sb.append("','depth':'2");
sb.append("','children':[{'text':'招商研究3','id':'ddd");
sb.append(i);
sb.append("','url':'javascript:void(0)','depth':'3'}]");
sb.append("}");
if(i!=limit-1){
sb.append(",");
}
else
{
sb.append("]},");
}
}
for (int j = 0; j < depth1; j++)
{
sb.append("{'text':'市场信息");
sb.append(j);
sb.append("','id':'info");
sb.append(j);
sb.append("','url':'javascript:void(0)','depth':'1',");
sb.append("'children':[");
for (int i = start;i < limit2; i++)
{
sb.append("{'text':'");
if(Math.floor(Math.random() * 100)>50)
{
sb.append("利好信息");
}
else
{
sb.append("熊市信息");
}
sb.append("','id':'");
sb.append("infoNode");
sb.append(j);
sb.append(i);
sb.append("','url':'");
sb.append(url);
sb.append("','depth':'2");
sb.append("'}");
if(i!=limit2-1){
sb.append(",");
}
else
{
//sb.append("]},");
}
}
sb.append("]},");
}
sb.append("{'text':'客户杂志','id':'magazine','url':'javascript:void(0)','depth':'1',");
sb.append("'children':[");
for (int i = start; i < limit3; i++)
{
sb.append("{'text':'");
if(Math.floor(Math.random() * 100)>50)
{
sb.append("最新杂志");
}
else
{
sb.append("推荐文章");
}
sb.append("','id':'");
sb.append("magazineNode");
sb.append(i);
sb.append("','url':'");
sb.append(url);
sb.append("','depth':'2");
sb.append("'}");
if(i!=limit3-1){
sb.append(",");
}
else
{
sb.append("]}]");
}
}
sb.append("}]");
String rs = sb.toString();
System.out.println(rs);
try
{
xmlout.write(rs);
}
catch (Exception e)
{
e.printStackTrace();
}
finally
{
xmlout.flush();
xmlout.close();
}
%>
发表评论
-
overflow hidden 隐藏超出元素
2009-09-10 08:50 2559<!DOCTYPE html PUBLIC " ... -
dwr调用返回List、Set或者Map的java方法
2009-09-08 15:52 27836、调用返回List、Set或者Map的java方法 6.1、 ... -
json-taglib
2009-09-08 15:26 6874(2) json-taglib (http://json-ta ... -
JSON
2009-09-08 15:25 1388JSON作为一种信息的载体伴随着AJAX的红火也越来越得到广大 ... -
dwr的路径问题
2009-07-16 16:14 1749//dwr 引用util.js,engine.js,beanN ... -
AJAX 聊天室实现原理终极解析
2009-06-29 15:18 3055闲来无事,做了一个AJAX聊天室,以前一直想做一个,因为我和几 ... -
javascript获取FCKeditor内容:
2009-06-27 14:31 1914javascript获取 ... -
DWR实例
2009-06-24 14:05 1587一个非常好的DWR实例 2007-12-02 14: ... -
dwr 使用笔记
2009-06-24 13:53 1154DWR是一个框架,简单的说就是能够在javascript直接调 ... -
dwr converter 配置
2009-06-24 12:19 1842在配置dwr.xml的时候,需要配置 这个元素 DWR帮助我 ... -
dwr与jsp,html页面间参数传递
2009-06-23 11:11 2522DWR 处理各种form表单Select/option,tab ... -
RIA(Rich Interface Applications)
2009-06-22 16:44 1503RIA(Rich Interface Applications ...
相关推荐
**如何将数据库中的层次数据转换成对应的层次结构的JSON或XML格式的字符串,返回给客户端的JavaScript树形控件?** 这是一个关键问题,涉及到数据库中的层次数据结构与前端数据展示之间的桥梁建设。具体来说,数据...
jstree是一款基于jQuery的开源插件,它提供了一种简单、灵活的方式来创建交互式的目录树结构。这款插件支持多种操作,如展开/折叠节点、搜索、拖放等,适用于文件系统、组织结构、导航菜单等多个场景。 **一、安装...
数据存储器负责把各种类型的数据(如二维数组、JSON 对象数组、XML 文本等)转换成 Ext JS 的数据记录集 `Record`。 ##### 3.1 存放数据的类 `Record` `Record` 是 Ext JS 中用来表示单条数据记录的对象。它封装了...
在IT行业中,ZTree是一款广泛使用的JavaScript树形控件,尤其在数据展示和管理界面中。这个场景中提到的“Ztree后台拼接Json”主要指的是如何在服务器端(后台)处理并组合JSON数据,以便于ZTree前端组件能够正确...
【Java编写的目录树磁盘文件】是一种技术实现,它允许用户通过Web浏览器查看和浏览计算机硬盘上的文件系统结构。这种技术的核心是利用Java编程语言,结合特定的前端插件,如dtree,来创建一个交互式的目录树视图。在...
在`tree.html`中,我们需要使用JavaScript读取`tree_data.json`的内容,并使用`$.parser.onComplete`或`$(function(){})`来确保EasyUI加载完成后,将数据绑定到树形控件上。例如: ```javascript $.ajax({ url: '...
这个"JS树组件源代码"提供了一个简易的实现,是初学者理解JS与树形数据交互的理想资源。下面我们将深入探讨JS树组件的核心概念、实现原理以及如何通过源代码学习。 一、树组件的基本概念 树组件是一种用户界面控件...
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在这个场景下,JSON文件可能包含了我国所有省、市、区县的层级关系和名称信息,每个地区作为一个对象...
在Ext JS提供的众多UI控件中,树形菜单(Tree Menu)是最为常用的一种控件,适用于显示具有层级关系的数据,如文件目录、组织结构等。传统上,树形菜单有两种生成方式:一次性生成全部树节点和异步加载树节点。 ...
Bootstrap Treeview是一款基于Bootstrap框架的交互式树形视图组件,特别适合用于展示层次结构的数据,如导航菜单、组织架构或者文件系统等。这个组件利用了Bootstrap的样式和JavaScript插件,提供了美观且响应式的...
Tree 是一个常用的数据展示控件,它可以清晰地展示层次结构数据,如目录结构、组织架构等。EasyUI 提供了简单的方法来创建和操作 Tree。 描述中提到的 "简单的 easyui tree 例子" 暗示我们将会看到一个基础的 Tree ...
另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。 《ASP.NET 4高级程序设计(第4版)》适合各层次的ASP.NET程序员阅读。 =================== 第一部分 核心概念 第1章 ASP.NET简介 1.1 ASP.NET的...
5. JSON(JavaScript Object Notation)文件: JSON是一种轻量级的数据交换格式。Qt5引入了`QJsonDocument`和`QJsonObject`等类,使得处理JSON文件变得简单。可以解析JSON字符串,构建JSON对象树,再将该树写入文件...
另外,还专门介绍了ASP.NET4 新增的功能,如MVC 和动态数据等。 《ASP.NET 4高级程序设计(第4版)》适合各层次的ASP.NET程序员阅读。 作者简介 作者:(美)麦克唐纳 目录 第一部分 核心概念 第1章 ASP.NET简介 ...
- **JSON 数据格式**:通常,后台返回的数据以 JSON 格式传递,前端通过解析 JSON 来填充 EasyUI 组件,如表格、树形结构等。 4. **EasyUI 主要组件**: - **Dialog**:提供弹出对话框功能,用于显示提示信息、...
**dhtmlxTreeGrid** 是dhtmlxSuite中的一个重要组成部分,它结合了树形结构和表格的功能,允许用户以树状结构组织数据,并在每个节点下显示表格数据。这在展示层次结构复杂的数据时非常有用,例如组织结构、文件系统...