liutao_2006
- 浏览: 23949 次
- 性别:
- 来自: 长沙
-
最近访客 更多访客>>
文章分类
最新评论
-
helloxqy2008：
求楼主答案
写一段代码,实现银行转账功能 -
shoushounihao：
放个案例上去，谢谢
DhtmlXtree控件应用
1、 把数据库里的数据组成xml格式的字符串
ComponentFavorFactory类内容如下：
JSP页面：
1.树显示页面：
2.新增收藏夹页面
ComponentFavorFactory类内容如下：
public static String getFavorTree(String UserId,HttpServletRequest request){
ApplicationContext ctx = WebApplicationContextUtils
.getRequiredWebApplicationContext(request.getSession().getServletContext());
IFavoriteMgr favoriteMgr = (IFavoriteMgr)ctx.getBean("favoriteMgr");
//查询UserId用户所拥有的收藏夹列表
List userFavoriteList = favoriteMgr.getUserFavoriteDoc(UserId);
// StringBuffer来组装xml字符串
StringBuffer strBuf = new StringBuffer("<?xml version='1.0' encoding='iso-8859-1'?><tree id='0'>");
// 设置数据源
List nodeList = new ArrayList();
Map root = new HashMap();
String rootid = "0";
String rootName="默认收藏夹";
//这里主要是项目需要在每个用户还没有收藏任何文档，也没新建收藏夹前提下，自己为其建一个默认收藏夹。新收藏的文档首先默认放在默认收藏夹目录下，然后用户可根据自己的需要移动到用户自建的收藏夹目录下
for(Iterator iter = userFavoriteList.iterator();iter.hasNext();){
FavoriteInfo favorite = (FavoriteInfo)iter.next();
if("默认收藏夹".equals(favorite.getFavorName())){
rootid = favorite.getFavorId();
rootName = favorite.getFavorName();
}
}
strBuf.append(" <item text='"+rootName+"' id='rot"+rootid+"' open='1' im0='folder.gif' im1='openfolder.gif' im2='folder.gif' call='1' select='1'>");
//获取每个收藏夹下的文档列表
for(Iterator iter = userFavoriteList.iterator();iter.hasNext();){
FavoriteInfo favorite = (FavoriteInfo)iter.next();
//默认收藏夹下未归类的文档
if(rootid.equals(favorite.getFavorId())){
List userFavoriteDocList = favorite.getFavoriteDocList();
if(userFavoriteDocList!=null){
for(Iterator iter2 = userFavoriteDocList.iterator();iter2.hasNext();){
FavoriteDocInfo favoriteDoc = (FavoriteDocInfo)iter2.next();
strBuf.append("<item text='"+favoriteDoc.getDocName()+"' id='doc"+favoriteDoc.getDocId()+"' im0='file.gif' im1='file.gif' im2='file.gif'></item>");
}
}
}else{
//默认收藏夹下用户自建的收藏夹列表
strBuf.append("<item text='"+favorite.getFavorName()+"' id='fav"+favorite.getFavorId()+"' open='1' im0='folder.gif' im1='openfolder.gif' im2='folder.gif'>");
//用户自建的收藏夹下的文档列表
List userFavoriteDocList = favorite.getFavoriteDocList();
if(userFavoriteDocList!=null){
for(Iterator iter2 = userFavoriteDocList.iterator();iter2.hasNext();){
FavoriteDocInfo favoriteDoc = (FavoriteDocInfo)iter2.next();
strBuf.append("<item text='"+favoriteDoc.getDocName()+"' id='doc"+favoriteDoc.getDocId()+"' im0='file.gif' im1='file.gif' im2='file.gif'></item>");
}
}
strBuf.append("</item>");
}
}
strBuf.append("</item>");
strBuf.append("</tree>");
// System.out.println(strBuf.toString());
return strBuf.toString();
}
JSP页面：
1.树显示页面：
<%@ page language="java" pageEncoding="GBK" %>
<%@ page import="com.miracle.dm.doc.favorite.ComponentFavorFactory"%>
<%@page import="com.opensymphony.xwork2.ActionContext" %>
<%@page import="com.miracle.dm.framework.webapp.model.WebUser" %>
<%@page import="com.miracle.dm.framework.common.Constants" %>
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>收藏夹管理</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<style type="text/css">
.createSpan,.createSpan td{ font-size : 12px; background-color:white;}
<!--下面两个样式主要是为了实现iframe滑动条样式设计的-->
html {
overflow-y:auto!important;
*overflow-y:scroll;
}
body {
SCROLLBAR-FACE-COLOR: #B7E6FC;
SCROLLBAR-3DLIGHT-COLOR: #EEFAFF;
SCROLLBAR-DARKSHADOW-COLOR: #6DC5EE;
SCROLLBAR-BASE-COLOR: #D9F2FB;
}
</style>
<script language="JavaScript" src="<%=request.getContextPath()%>/codebase/dhtmlxcommon.js"></script>
<script Type="text/javascript" Src="<%=request.getContextPath()%>/codebase/dhtmlxtree.js"></script>
<script Type="text/javascript" Src="<%=request.getContextPath()%>/codebase/ext/dhtmlxtree_dragin.js"></script>
<script Type="text/javascript" Src="<%=request.getContextPath()%>/codebase/ext/dhtmlxtree_ed.js"></script>
<script Type="text/javascript" Src="<%=request.getContextPath()%>/codebase/ext/dhtmlxtree_er.js"></script>
<script Type="text/javascript" Src="<%=request.getContextPath()%>/codebase/ext/dhtmlxtree_json.js"></script>
<script Type="text/javascript" Src="<%=request.getContextPath()%>/codebase/ext/dhtmlxtree_start.js"></script>
<script language='javascript' src='<%=request.getContextPath()%>/js/prototype.js'></script>
<script language='javascript'>
//删除文档或文件夹
function del(id){
//alert(id);
if(confirm('是否确定删除')==true){
DoSubmit(id);
}
}
function DoSubmit(id)
{
var url = '<%=request.getContextPath()%>/favorite/delete!delete.do';
var params = "id="+id;
var myAjax = new Ajax.Request(
url,
{
method: 'POST',
parameters:params,
onComplete: processDelResponse,
asynchronous:true
});
}
function processDelResponse(request){
var result = request.responseText;
// alert(result);
if(result=="success"){
//数据库里删除成功才删除树显示页面上的节点
tree.deleteItem(tree.getSelectedItemId());
showmsg("删除成功！");
}else{
showmsg("删除失败！");
}
}
//移动文档
function move(){
var favCount = 0;
var docCount = 0;
var favorId = "";
var docIds = "";
var str = tree.getAllChecked();
if(null==str||""==str){
alert("请选择");
return ;
}
var arrayStr = new Array();
arrayStr = str.split(",");
for(var i=0;i<arrayStr.length&&null!=arrayStr[i]&&""!=arrayStr[i];i++){
if("fav"==arrayStr[i].substring(0,3)||"rot"==arrayStr[i].substring(0,3)){
if(favCount==0){
$('targetId').value = arrayStr[i];
favorId += arrayStr[i].substring(3,arrayStr[i].length);
}else{
favorId += ","+arrayStr[i].substring(3,arrayStr[i].length);
}
favCount++;
}
if("doc"==arrayStr[i].substring(0,3)){
if(docCount==0){
docIds += arrayStr[i].substring(3,arrayStr[i].length);
}else{
docIds += ","+arrayStr[i].substring(3,arrayStr[i].length);
}
docCount++;
}
}
if(favCount>1){
alert("只能选择一个收藏夹");
return;
}
if(favCount==0){
alert("请选择一个收藏夹");
return ;
}
if(docCount==0){
alert("请选择需移动的文档");
return;
}
$('nodeId').value = docIds;
var url = '<%=request.getContextPath()%>/favorite/move!move.do';
var params = "docIds=" + docIds + "&favorId=" + favorId;
var myAjax = new Ajax.Request(
url,
{
method: 'POST',
parameters:params,
onComplete: processMoveResponse,
asynchronous:true
});
}
function processMoveResponse(request){
var result = request.responseText;
if(result=="success"){
var id2 = $('targetId').value;
var ids = $('nodeId').value;
var arrayIds = new Array();
arrayIds = ids.split(",");
for(var i=0;i<arrayIds.length;i++){
var id ="doc"+ arrayIds[i];
tree.moveItem(id,"item_child",id2);
}
}else{
alert("操作失败！");
}
}
</script>
</head>
<%
//获取登录用户的ID
WebUser webUser = (WebUser)ActionContext.getContext().getSession().get(Constants.WEBUSER_KEY);
String userId = webUser.getUser().getId();
%>
<!-- style="overflow-x:hidden;overfow-y:yes"主要实现的是包含这个页面内容的iframe框架只显示右边框滑动条，而不显示下边框滑动条-->
<BODY oncontextmenu="return false" BGCOLOR=#5189bd LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 style="overflow-x:hidden;overfow-y:yes">
<form>
<input type="hidden" name="oldFavorId" id="oldFavorId" value="-1">
<input type="hidden" name="oldFavorName" id="oldFavorName" value="-1">
<input type="hidden" name="targetId" id="targetId" value="-1">
<input type="hidden" name="nodeId" id="nodeId" value="-1">
<table style="position: absolute; top: 0;left: 0; width:150px">
<tr>
<td>
<div id="treeboxbox_tree"></div>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
//右击菜单生成
var oPopup = window.createPopup();
var oPopBody = oPopup.document.body;
//菜单生成
function tonrightclick(id,e){
tree.selectItem(id,true);
if("rot"==id.substring(0,3)){
oPopBody.innerHTML = "<span id='contextmenu' style='border:1px solid #000000;background:#5189bd;width=55px;text-align:center;padding:0px;display:block;position:absolute；;font-size: 12px; color: #000000;'><div onclick='parent.newopenwindow()' style='cursor:hand;'>新建</div></span> ";
oPopup.show(document.body.scrollLeft+e.clientX+10,document.body.scrollTop+e.clientY+10, 55, 16, document.body);
}else if("doc"==id.substring(0,3)){
var idStr='"'+id+'"';
oPopBody.innerHTML = "<span id='contextmenu' style='border:1px solid #000000;background:#5189bd;width=55px;text-align:center;padding:0px;display:block;position:absolute;font-size: 12px; color: #000000;'><div onclick='parent.oneclick("+ idStr +")' style='cursor:hand;'>阅读</div>--------<div onclick='parent.del("+ idStr +")' style='cursor:hand;'>删除</div></span> ";
oPopup.show(document.body.scrollLeft+e.clientX+10,document.body.scrollTop+e.clientY+10, 55, 44, document.body);
}else{
var idStr='"'+id+'"';
oPopBody.innerHTML = "<span id='contextmenu' style='border:1px solid #000000;background:#5189bd;width=55px;text-align:center;padding:0px;display:block;position:absolute;font-size: 12px; color: #000000;'><div onclick='parent.editclick("+ idStr +")' style='cursor:hand;'>修改</div>--------<div onclick='parent.del("+ idStr +")' style='cursor:hand;'>删除</div></span> ";
oPopup.show(document.body.scrollLeft+e.clientX+10,document.body.scrollTop+e.clientY+10, 55, 44, document.body);
}
};
//打开新增收藏夹界面
function newopenwindow(){
window.parent.open ('/DataManager/apps/doc/favorite/favoriteInfoAdd.jsp', 'newwindow2', 'height=200, width=400, top=200, left=600, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}
//单击阅读浏览该文档的信息
function oneclick(id){
var docId = id.substring(3,id.length);
var url = "/DataManager/document/documentAction!searchDocumentInfo.do?docId="+docId;
window.open(url);
}
//单击修改弹出修改收藏夹名称的页面
function editclick(id){
$('oldFavorId').value=id;
var str = ""+tree.getItemText(id);
$('oldFavorName').value=str.substring(str.indexOf("value=")+6,str.indexOf(">"));
window.parent.open ('/DataManager/apps/doc/favorite/favoriteInfoEdit.jsp', 'newwindow2', 'height=200, width=400, top=200, left=600, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}
//修改成功后，再接着修改树上的被修改节点的内容
function editnode(favorname){
var itemId = $('oldFavorId').value;
tree.setItemText(itemId,favorname);
}
//新增收藏夹成功后，在树上添加节点
function addnode(favorId,favorname){
tree.insertNewChild(tree.getSelectedItemId(),favorId,favorname,0,'folder.gif' ,'openfolder.gif','folder.gif','');
}
//在选上复选框，弹出移动菜单
function toncheck(id,e){
if(null!=tree.getAllChecked()&&""!=tree.getAllChecked()){
oPopBody.innerHTML = "<span id='contextmenu' style='border:1px solid #000000;background:#5189bd;width=55px;text-align:center;padding:0px;display:block;position:absolute;font-size: 12px; color: #000000;'><div onclick='parent.move()' style='cursor:hand;'>移动</div></span> ";
oPopup.show(130,6, 55, 16, document.body);
}
}
//因本项目中这个页面是在首页的iframe中显示，而DhtmlXtree采用的是在span显示节点的内容，故导致节点内容过长无法显示问题。所以这里采用当鼠标移动节点上时在鼠标所在位置显示该节点的全部内容
function createSpan(id){
var dragSpan = document.createElement('div');
var text="<table><tr><td>"+ tree.getItemText(id)+"</td></tr></table>";
dragSpan.innerHTML=text;
dragSpan.id="showText";
dragSpan.style.position="absolute";
dragSpan.style.left= document.body.scrollLeft+event.clientX;
dragSpan.style.top= document.body.scrollTop+event.clientY;
// alert(dragSpan.style.left+"========="+dragSpan.style.top);
dragSpan.style.zIndex = "1";
dragSpan.className="createSpan";
document.body.appendChild(dragSpan);
}
//鼠标离开时则弹出的层也消失
Function removeSpan(id){
var divSpan = document.getElementById("showText");
if(null!=divSpan){
divSpan.removeNode(true);
}
}
//载入
function load(){
//树
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("/DataManager/codebase/imgs/csh_vista/");
tree.enableCheckBoxes(1);
tree.enableThreeStateCheckboxes(false);
tree.setOnCheckHandler(toncheck);
tree.setOnRightClickHandler(tonrightclick);
tree.setOnMouseInHandler(createSpan);
tree.setOnMouseOutHandler(removeSpan);
tree.loadXMLString("<%=ComponentFavorFactory.getFavorTree(userId,request) %>");
}
load();
</script>
</body>
</html>
2.新增收藏夹页面
<%@ page language="java" pageEncoding="GBK" %>
<%@ taglib prefix='s' uri='/struts-tags'%>
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>收藏夹管理</title>
<link rel="stylesheet" type="text/css" media="all" href="<%=request.getContextPath()%>/css/default.css" />
</head>
<%@include file="/inc/commoncontent.inc" %>
<script language='javascript' src='<%=request.getContextPath()%>/js/prototype.js'></script>
<script language='javascript'>
function addNode(result,favorname){
//调用iframe所包含的页面的addnode方法
window.opener.document.favorCatalog.addnode(result,favorname);
}
function checkandcommit(PageType){
var strFuns = "DoSubmit(" + PageType +")";
doCheck(document.all.form1, strFuns);
}
function DoSubmit(PageType)
{
var url = '<%=request.getContextPath()%>/favorite/addUserFavorite!addUserFavorite.do';
var favorName = escape(encodeURIComponent($("favorName").value));
var params = "favorName=" + favorName;
var myAjax = new Ajax.Request(
url,
{
method: 'POST',
parameters:params,
onComplete: processResponse,
asynchronous:true
});
}
function processResponse(request){
var result = request.responseText;
if(result=='error'){
var displaySrc = document.getElementById("displayError");
displaySrc.innerHTML = "<font color='red'>收藏夹文件名重复，请重新输入！</font>";
}else{
var favorname =$("favorName").value;
addNode(result,favorname);
}
}
function clearDisplay(){
var displaySrc = document.getElementById("displayError");
displaySrc.innerHTML = "";
}
</script>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<form name=form1 id=form1 style="center" method="post" action="">
<br>
<TABLE WIDTH="96%" HEIGHT="95%" BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">
<table align="center" border="0" width="70%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" background="/res/images/platform/carddw.gif" scope="col" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="11px" valign="top" background="../res/images/platform/carddw-3.gif" scope="col"><div align="left"><img src="/DataManager/res/images/platform/carddw-4.gif" width="11" height="21"></div></td>
<td nowrap width="15%" background="/DataManager/res/images/platform/carddw-3.gif" scope="col"><div align="center"><span class="style1">新建收藏夹</span></div></td>
<td width="84%" valign="top" scope="col"><div align="left"><img src="/DataManager/res/images/platform/page-g.gif" width="28" height="22"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align=center cellpadding="0" width=100% cellspacing="0" border=1 bordercolorlight="#9EB5E7" bordercolordark="#FFFFFF">
<tr>
<td valign=top><br>
<table align="center" border="0" width="100%" cellpadding="1" cellspacing="1">
<tr>
<td nowrap colspan="2"> 收藏夹名称
<input type="text" name="favorName" id="favorName" style="width: 205px" caption="cname:收藏夹名称;type:string;isnull:false;maxlen:40;" onfocus="javacript:clearDisplay()"><br>
<span id="displayError"></span>
</td>
</tr>
<tr><td height="19"></td><td></td></tr>
<tr align="center">
<td align="right" width="50%"><input type="button" class="button1" value="添加" onclick="checkandcommit(1)"></td>
<td align="left" width="50%"> <input type="button" class="button1" value="关闭" onclick="window.close()" align="middle"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</TABLE>
</form>
</body>
</html>
分享到：
发表评论
相关推荐
《DhtmlXTREE控件应用详解与实例演示》 DhtmlXTREE是一款强大的JavaScript和HTML实现的树形控件，广泛应用于网页中的目录结构展示、菜单系统构建等场景。它支持XML、JSON等多种数据格式，可以方便地动态加载和操作...
dhtmlxTree是一款基于JavaScript的树形控件，它提供了丰富的功能和自定义选项，用于在Web应用程序中创建交互式的树状数据结构。这个控件允许开发者以灵活的方式展示层次化的信息，例如网站导航、文件系统目录或者...
总结来说，dhtmlxTree 3.6是一个强大且灵活的JavaScript树形控件，提供丰富的功能和良好的扩展性，适用于构建需要展示层级结构的Web应用。通过其丰富的API和扩展模块，开发人员可以轻松地创建符合需求的交互式树形...
总结来说，dhtmlxTree3.6是一个强大且灵活的JavaScript树控件，提供了丰富的特性和良好的可扩展性，适用于各种需要展示层级结构信息的Web应用。通过深入理解和熟练运用，开发人员可以创建出功能完备、用户体验出色的...
**标题与描述解析** 标题中的“dhtmlxGrid”和“dhtmlxTree”是两个知名的JavaScript库，它们属于dhtmlx Suite的一部分...dhtmlxGrid是一个灵活的数据网格控件，而dhtmlxTree则是一个树形视图组件，两者都是JavaScrip
**dhtmlxtree** 是一个基于JavaScript的树形控件，是dhtmlx库的一部分，用于在Web应用程序中创建交互式、可扩展的树结构。这个控件支持多种功能，如拖放操作、多选、节点展开/折叠、自定义图标和节点文本，以及与...
dhtmlxtree是一款基于JavaScript的开源树形菜单控件，专为Web开发人员设计，用于在网页中构建交互式、可扩展的树状结构。它提供了丰富的功能和自定义选项，使得用户界面更加直观和易于操作。这款专业版dhtmlxtree在...
dhtmlxTree是一款基于JavaScript的树形控件，它允许在网页上创建交互式的、可扩展的树状结构。这款控件支持多种操作，包括节点的添加、删除、拖放、展开与折叠等，可以用于构建导航菜单、组织结构图或者数据层级展示...
Dhtmlxtree是一款基于JavaScript的树形控件，它提供了丰富的功能和自定义选项，用于在Web应用中创建交互式的树结构。这个例子展示了如何简单地使用Dhtmlxtree，并且利用XML数据来构建树节点。 首先，我们需要理解...
"js动态树合集dhtmlXTree和dtree.rar"是一个压缩包，包含两种流行的JavaScript树形控件：dhtmlXTree和dtree。这些控件允许开发者在网页中创建可交互的树状结构，用于数据展示、导航或层级数据管理。 首先，...
dhtmlxtree是一款强大的JavaScript树形控件，由DHTMLX Suite组件库提供，它允许开发者在Web应用程序中创建交互式的、可扩展的树状结构。dhtmlxtree支持多种特性，如节点的动态加载、复选框、右键菜单、拖放操作等，...
**dhtmlxtree专业版详解** dhtmlxtree是一款基于JavaScript的专业级树形控件，它在...通过深入研究这个压缩包，开发者可以快速上手并充分利用dhtmlxtree的专业特性，为Web应用构建功能强大且用户体验优秀的树形视图。
【dhtmlxtree_std_full】是一款基于DHTML技术的全功能树形控件，它在Web应用程序中被广泛用于展示层次结构的数据，如文件系统、组织结构或导航菜单。DHTMLX Tree是一款强大的JavaScript库，提供了丰富的交互性和高度...
dhtmlxTree是一款功能强大的JavaScript组件，用于在Web应用中构建交互式的树形结构。它属于dhtmlxSuite的一部分，这是一个全面的JavaScript UI库，提供了各种各样的用户界面元素。dhtmlxTree 2.1 版本是该组件的一个...
其次，`dhtmlXTree` 支持事件处理，这使得树控件能够响应用户的交互行为。例如，可以注册`onSelectChange`事件来监听节点选择的变化，`onClick`事件则可以捕捉到节点被点击的情况。这些事件可以与JavaScript函数关联...
【标题】"dhtmlxTree.zip" 是一个包含与JSP相关的目录树组件的压缩文件，这个组件基于dhtml技术，用于在Web应用程序中创建交互式的树形结构。dhtmlxTree是一个流行的JavaScript库，它提供了丰富的功能和自定义选项，...
总的来说，dhtmlxTree2.5标准版的改进旨在提供一个更强大、更灵活的树控件，同时保持与专业版相仿的功能特性，为开发者提供了一个无需购买专业版也能实现类似效果的选择。这对于那些预算有限但又希望提升用户体验的...