利用DhtmlXtree实现展现，修改，添加，删除，移动功能一棵树上实现，iframe的单个滑动条显示，包含在iframe中树节点中文内容过长问题解决
利用DhtmlXtree实现展现，修改，添加，删除，移动功能一棵树上实现，iframe的单个滑动条显示，包含在iframe中树节点中文内容过长问题解决
1、 把数据库里的数据组成xml格式的字符串
在ComponentFavorFactory类中
/**
* 收藏文档列表树整理DHtmlXtree控件
*/
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页面：
树显示的页面：
<%@ 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>
新增收藏夹页面
<%@ 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>
更新页面就不再贴上来了，看了新增页面，相信写出更新页面不是问题。至于Control和Mode这两个方面的代码就和DhtmlXtree的介绍没多大关系也就不贴上来了。