使用Ajax架構實現清單項目的拖拽與資料顯示

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文繼承了文章“實現可拖拽的列表”、文章“以列表形式顯示動態載入的資料 ”和文章“使用Dom解析xml檔案”的功能，進一步將功能延伸。執行個體背景：每一個清單項目為一個xml檔案的名字，拖拽每一個清單項目時，將清單項目對應的檔案內容使用Dom解析出來，以表格的形式顯示在首頁面上。

開發環境：eclipse

使用的語言：JavaScript，HTML，Java，JSP

採用的方法：使用JavaScript書寫連接埠，調用JSP傳遞參數，接收資料，將資料在首頁面顯示，從而完成資料互動。

實現功能的原始碼：

1. 首頁面的HTML原始碼

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>資料來源列表顯示</title>
<script type=text/javascript src="/MIS_Frame_0.1/src/prototype.js"></script>
<script type=text/javascript src="/MIS_Frame_0.1/GetDSLists.js"></script>
<script type="text/javascript" src="/MIS_Frame_0.1/src/scriptaculous.js"></script>

</head>

<body onLoad="javascript:getdslists();">
<h1>已封裝的資源清單</h1>
<hr/>
<div id="leftDiv" onMouseOver="javascript:dragtest();"></div>
<div id="rightContainers">
<div id="grp1">
  accepts first box
  accepts first box
  accepts first box
    </div>
</div>
</body>
</html>

2. 用到的CSS原始碼

div, li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
ul {
position:relative;
list-style: none;
margin:0; padding:0;
overflow: visible;
}
li {position:relative;}

#leftDiv {
position: absolute;
top: 16%; left: 0; bottom: 0;
width: 30%;
margin: 0; padding: 7px;
border-right: 2px solid #bb9;
background-color: #eed;
}
#leftDiv li {
margin: 3px 0; padding: 3px 3em 3px 10px;
border: 2px solid #456;
background-color: #cde;
cursor: move;
}

#rightContainers {
padding: .5em;
position: absolute;
top: 16%;
bottom: 0;
right: 0;
left: 35%;
overflow:auto;
width: 936px;
height: 1072px;
}

</style>

3. 用到的JavaScript原始碼

GetDSLists.js源碼：

function cleanup()
{
//try to remove circular references
lis = document.getElementsByTagName("li");
for (i = 0; i < lis.length; i++)
  {
   if (lis[i].longListItem)
    {
     lis[i].longListItem.destroy();
    }
   else if (lis[i].container)
    {
     lis[i].container.destroy();
    }
  }
Draggables.clear();
}

function dragtest()
{
var li = $("leftDiv").getElementsByTagName('LI');
for (var i = 0; i < li.length; i++)
{
  var j=0;
  var d = new Draggable(li[i],
   {
    revert:true,
    ghosting: false,
    scroll: "rightContainers",
    onEnd:function()
     {
         var liId=li[i];
      if(event.srcElement.id)
       {
        var CurClickID = event.srcElement.id ;
          listTest=$(CurClickID).innerText;
          sendlisttext();
           //alert($(CurClickID).innerText);
         }
       }
   });
}
var divs = $("rightContainers").getElementsByTagName("div");
for (i = 0; i < divs.length; i++)
  {
   if (divs[i].className && Element.hasClassName(divs[i], "container"))
   {
    Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});
   }
  }
Event.observe(window, 'unload', cleanup, false);
}

var XmlHttp;
function sendlisttext()
{
CreateXMLHttpRequest();
XmlHttp.open("POST",applicationRoot + "/GetlistText.jsp",true);
XmlHttp.onreadystatechange=HandleStateChange;
XmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XmlHttp.send("listTest="+listTest);
}

function CreateXMLHttpRequest()
{
if(window.ActiveXObject)
{
  XmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttRequest)
  {
   XmlHttp=new XMLHttpRequest();
  }
}

function HandleStateChange()
{
if(XmlHttp.readyState==4)
{
     //alert("ok");
     if(XmlHttp.status==200)
     {
     //alert("ok,good");
    //alert(xmlHttp.responseText);
       $("rightContainers").innerHTML=XmlHttp.responseText;
     }else {alert("wrong wrong");}
}
}
</script>

4. JSP源碼

<%@ page contentType="text/xml;charset=GB2312"%>
<%@ page import="manage.*" %>

String pstr= request.getParameter("listTest");
  ShowDSValue dsvalues = new ShowDSValue();
  String filename=pstr;
  String path = dsvalues.CreatPath(filename);
  response.setContentType("text/xml");
out.clear();
out.print(dsvalues.get_root_childName_childName(path));
%>

以上是實現“清單項目的拖拽與資料顯示”功能的所有原始碼，需要它的朋友，可以根據列出的內容整理一下，然後在tomcat下試運行。如有問題，請提出。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More