由於項目需要，在網上收集了不少資料，關於樹的拖拽，使用Jquery實現非同步載入資料，不多說，下面讓我們開始我們的拖拽至旅。
前台代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SimpleTreeView.aspx.cs" Inherits="Test_SimpleTreeView" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <link rel="stylesheet" href="css/jquery.simple.tree.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.simple.tree.js"></script> <script type="text/javascript"> var simpleTreeCollection; $(document).ready(function () { simpleTreeCollection = $('.simpleTree').simpleTree({ autoclose: true, afterClick: function (node) { //alert("text-"+$('span:first',node).text()); }, afterDblClick: function (node) { //alert("text-"+$('span:first',node).text()); }, afterMove: function (destination, source, pos) { //alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos); }, afterAjax: function () { //alert('Loaded'); }, animate: true //,docToFolderConvert:true }); }); </script></head><body> <div class="contextMenu" id="myMenu1"> <ul> <li id="add"> <img src="images/simpletreeview/folder_add.png" /> Add child</li> <li id="reload"> <img src="images/simpletreeview/arrow_refresh.png" /> Reload</li> <li id="edit"> <img src="images/simpletreeview/folder_edit.png" /> Edit</li> <li id="delete"> <img src="images/simpletreeview/folder_delete.png" /> Delete</li> </ul> </div> <div class="contextMenu" id="myMenu2"> <ul> <li id="edit"> <img src="images/simpletreeview/page_edit.png" /> Edit</li> <li id="delete"> <img src="images/simpletreeview/page_delete.png" /> Delete</li> </ul> </div> <ul class="simpleTree"> <li class="root" id='1'><span>Tree Root 1</span> <ul> <li class="open" id='2'><span>Tree Node 1</span> <ul> <li id='3'><span>Tree Node 1-1</span> <ul class="ajax"> <li id='4'>{url:SimpleTreeHandler.ashx?pid=917E87C8-647D-4D02-8605-011301824BC3}</li> </ul> </li> </ul> </li> <li id='5'><span>Tree Node 2</span> <ul> <li id='6'><span>Tree Node 2-1</span> <ul> <li id='7'><span>Tree Node 2-1-1</span></li> <li id='8'><span>Tree Node 2-1-2</span></li> <li id='9'><span>Tree Node 2-1-3</span></li> <li id='10'><span>Tree Node 2-1-4</span> <ul class="ajax"> <li id='11'>{url:SimpleTreeHandler.ashx?pid=917E87C8-647D-4D02-8605-011301824BC3}</li> </ul> </li> </ul> </li> <li id='12'><span>Tree Node 2-2</span> <ul> <li id='13'><span>Tree Node 2-2-1</span></li> </ul> </li> <li id='14'><span>Tree Node 2-3</span> <ul> <li id='15'><span>Tree Node 2-3-1</span> <ul> <li id='16'><span>Tree Node 2-3-1-1</span></li> <li id='17'><span>Tree Node 2-3-1-2</span></li> <li id='18'><span>Tree Node 2-3-1-3</span> <ul> <li id='19'><span>Tree Node 2-3-1-3-1</span></li> </ul> </li> <li id='20'><span>Tree Node 2-3-1-4</span></li> <li id='21'><span>Tree Node 2-3-1-5</span></li> <li id='22'><span>Tree Node 2-3-1-6</span> <ul> <li id='23'><span>Tree Node 2-3-1-6-1</span></li> </ul> </li> <li id='24'><span>Tree Node 2-3-1-7</span></li> <li id='25'><span>Tree Node 2-3-1-8</span></li> <li id='26'><span>Tree Node 2-3-1-9</span> <ul> <li id='27'><span>Tree Node 2-3-1-9-1</span></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <%--<input type="text" id="moveRecs" value="|" style="display: " /><input type="button" id="btnSaveActions" value="儲存當前移動" />--%></body><%--<script language="javascript" type="text/javascript"> $("#btnSaveActions").click(function () { $.get("SimpleTreeHandler.ashx", { "actions": $('#moveRecs').val() }, function (returnvalue) { //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等. alert(returnvalue); }); });</script>--%></html>
我用的HttpHander作為資料中間介面，代碼如下：
<%@ WebHandler Language="C#" Class="SimpleTreeHandler" %>using System;using System.Web;using System.Data;using System.Data.SqlClient;public class SimpleTreeHandler : IHttpHandler{ public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string parentId = ""; string type = ""; string resultStr = string.Empty; if (!string.IsNullOrEmpty(context.Request.QueryString["pid"])) { parentId = context.Request.QueryString["pid"]; } if (!string.IsNullOrEmpty(context.Request.QueryString["type"])) { type = context.Request.QueryString["type"]; } if (!string.IsNullOrEmpty(parentId)) { try { resultStr += "<ul>"; resultStr += GetChildText(parentId); resultStr += "</ul>"; } catch (Exception ex) { } } context.Response.Write(resultStr); } public bool IsReusable { get { return false; } } private DataTable GetTable(string commandString) { SqlConnection con = new SqlConnection("Server=.;DataBase=Exam;UID=sa;Pwd=xuwenwu_1983"); con.Open(); DataSet ds = new DataSet(); SqlDataAdapter da = new SqlDataAdapter(commandString, con); da.Fill(ds); DataTable dt = ds.Tables[0]; return dt; } private string GetChildText(string parentId) { string strjson = ""; DataTable dt = GetTable("SELECT * FROM TreeView WHERE ParentId = '" + parentId + "'"); foreach (DataRow rowItem in dt.Rows) { strjson += "<li id=\"" + rowItem["Id"].ToString() + "\"><span id=\"1_" + rowItem["Id"].ToString() + "\">" + rowItem["NodeName"].ToString() + "</span>"; strjson += "<ul class='ajax'><li>{url:SimpleTreeHandler.ashx?pid=" + rowItem["Id"].ToString() + "}</li></ul>"; strjson += "</li>"; } return strjson; } private bool IsHasChild(string parentId) { DataTable dt = GetTable("SELECT * FROM TreeView WHERE ParentId ='" + parentId + "'"); if (dt.Rows.Count == 0) { return false; } else { return true; } }}
CSS代碼：
body{font: normal 12px arial, tahoma, helvetica, sans-serif;margin:0;background:#fff;padding:20px;}.simpleTree{margin:0;padding:0;/*overflow:auto;width: 250px;height:350px;overflow:auto;border: 1px solid #444444;*/}.simpleTree li{list-style: none;margin:0;padding:0 0 0 34px;line-height: 14px;}.simpleTree li span{display:inline;clear: left;white-space: nowrap;}.simpleTree ul{margin:0; padding:0;}.simpleTree .root{margin-left:-16px;background: url(../images/simpletreeview/root.gif) no-repeat 16px 0 #ffffff;}.simpleTree .line{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(../images/simpletreeview/line_bg.gif) 0 0 no-repeat transparent;}.simpleTree .line-last{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(../images/simpletreeview/spacer.gif) 0 0 no-repeat transparent;}.simpleTree .line-over{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(../images/simpletreeview/line_bg_over.gif) 0 0 no-repeat transparent;}.simpleTree .line-over-last{margin:0 0 0 -16px;padding:0;line-height: 3px;height:3px;font-size:3px;background: url(../images/simpletreeview/line_bg_over_last.gif) 0 0 no-repeat transparent;}.simpleTree .folder-open{margin-left:-16px;background: url(../images/simpletreeview/collapsable.gif) 0 -2px no-repeat #fff;}.simpleTree .folder-open-last{margin-left:-16px;background: url(../images/simpletreeview/collapsable-last.gif) 0 -2px no-repeat #fff;}.simpleTree .folder-close{margin-left:-16px;background: url(../images/simpletreeview/expandable.gif) 0 -2px no-repeat #fff;}.simpleTree .folder-close-last{margin-left:-16px;background: url(../images/simpletreeview/expandable-last.gif) 0 -2px no-repeat #fff;}.simpleTree .doc{margin-left:-16px;background: url(../images/simpletreeview/leaf.gif) 0 -1px no-repeat #fff;}.simpleTree .doc-last{margin-left:-16px;background: url(../images/simpletreeview/leaf-last.gif) 0 -1px no-repeat #fff;}.simpleTree .ajax{background: url(../images/simpletreeview/spinner.gif) no-repeat 0 0 #ffffff;height: 16px;display:none;}.simpleTree .ajax li{display:none;margin:0; padding:0;}.simpleTree .trigger{display:inline;margin-left:-32px;width: 28px;height: 11px;cursor:pointer;}.simpleTree .text{cursor: default;}.simpleTree .active{cursor: default;background-color:#F7BE77;padding:0px 2px;border: 1px dashed #444;}#drag_container{background:#ffffff;color:#000;font: normal 11px arial, tahoma, helvetica, sans-serif;border: 1px dashed #767676;}#drag_container ul{list-style: none;padding:0;margin:0;}#drag_container li{list-style: none;background-color:#ffffff;line-height:18px;white-space: nowrap;padding:1px 1px 0px 16px;margin:0;}#drag_container li span{padding:0;}#drag_container li.doc, #drag_container li.doc-last{background: url(../images/simpletreeview/leaf.gif) no-repeat -17px 0 #ffffff;}#drag_container .folder-close, #drag_container .folder-close-last{background: url(../images/simpletreeview/expandable.gif) no-repeat -17px 0 #ffffff;}#drag_container .folder-open, #drag_container .folder-open-last{background: url(../images/simpletreeview/collapsable.gif) no-repeat -17px 0 #ffffff;}.contextMenu{display:none;}
資料庫設計參見前一篇。
完整源碼：Jquery TreeView可拖拽樹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
