Due to project requirements, a lot of information has been collected on the Internet. For how to drag and drop trees, use jquery to load data asynchronously. Let's start dragging data to travel.
Front-end code:
<% @ 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">
I use httphander as the data intermediate interface. The Code is as follows:
<%@ 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 code:
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;}
For database design, see the previous article.
Complete source code: jquery Treeview drag-and-drop tree
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
