liutao_2006
- 浏览: 23238 次
- 性别:
- 来自: 长沙
-
最近访客 更多访客>>
文章分类
最新评论
-
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
第三方树控件dhtmlxTree 3.6
DHtmlXTree应用指南,DHtmlXTree,DHtmlXTree教程，DHtmlXTree详细文档，DHtmlXTree使用例仔
dhtmlXtree树 右dhtmlXtree键菜单
第三方树控件dhtmlxTree
包含dhtmlxTree(树型控件),dhtmlxTabbar(选项卡),dhtmlxGrid(数据表格),dhtmlxCombo(下拉选项),dhtmlxTreeGrid(树型表格),dhtmlxVault(文件上传控件),dhtmlxMenu(菜单),dhtmlxToolbar(工具条),dhtmlxCalendar(日历...
对于这些控件列子，能很好的解决一系列的问题，满足客户一系列的需求，既简单又易操作
通过开发一个小工具讲述DHtmlXTree的应该 主要内容： DHtmlXTree生成设置 xml文档生成 DHtmlXTree加载xml文档
dhtmlxtree和json的应用。自己写的练习项目，免费下载。
dhtmlxTree 最好的tree控件
dhtmlxTree文档，代码都有，控件学习
专业版dhtmlxtree下载 专业版dhtmlxtree下载
dhtmlxtree例子
dhtmlxSuite:包含dhtmlxTree(树型控件),dhtmlxTabbar(选项卡),dhtmlxGrid(数据表格),dhtmlxCombo(下拉选项),dhtmlxTreeGrid(树型表格),dhtmlxVault(文件上传控件),dhtmlxMenu(菜单),dhtmlxToolbar(工具条),...
从版本2.0，dhtmlxLayout提供了 DHTMLX组件与其他高层次的集成 ，如 dhtmlxGrid ，dhtmlxTree ， dhtmlxWindows ， dhtmlxMenu 等窗格集成组件可以在全球的应用和分别为每个布局。 有了一个新的皮肤2.5版本，介绍，...
dhtmlxtree中文开发指导，简单介绍dhtmlxtree的使用。初学者适合。