ASP. NET jquery-based drag-and-drop tree

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.