DhtmlXtree 컨트롤 적용

26967 단어 Ajaxjspcssprototypeext
1. 데이터베이스에 있는 데이터를 xml 형식으로 구성하는 문자열
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">&nbsp;     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

좋은 웹페이지 즐겨찾기