利用DhtmlXtree实现展现，修改，添加，删除，移动功能一棵树上实现，iframe的单个滑动条显示，包含在iframe中树节点中文内容过长问题解决

diaoweili

浏览: 71565 次
性别:
来自: 北京

最近访客更多访客>>

nego2009

gxpcw

henry2212

th645231

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java Web 学习开发应用

JavaScript EXT Ajax CSS JSP

利用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>

.createSpan,.createSpan td{ font-size : 12px; background-color:white;}

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>

//删除文档或文件夹

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();

<form>

<tr>

<td>

</td>

</tr>

</table>

</form>

//右击菜单生成

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>

</head>

<%@include file="/inc/commoncontent.inc" %>

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>

<br>

<tr>

<td>

<tr>

<tr>

<td nowrap width="15%" background="/DataManager/res/images/platform/carddw-3.gif" scope="col"><div align="center"><span class="style1">新建收藏夹</span></div></td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<tr>

<td nowrap colspan="2"> 收藏夹名称       

</td>

</tr>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</TABLE>

</form>

</body>

</html>

更新页面就不再贴上来了，看了新增页面，相信写出更新页面不是问题。至于Control和Mode这两个方面的代码就和DhtmlXtree的介绍没多大关系也就不贴上来了。

分享到：

DhtmlxTree控件实现右键菜单的方法 | dhtmlxTree开发指导

2010-10-12 22:43
浏览 3282
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论