ASP.NET基于JQUERY的可拖拽树

最新推荐文章于 2019-09-24 05:40:39 发布

xuwenwu

最新推荐文章于 2019-09-24 05:40:39 发布

阅读量1.6k

点赞数

分类专栏： JavaScript专栏 ASP.NET专栏文章标签： jquery asp.net url function string class

本文链接：https://blog.csdn.net/xuwenwu/article/details/6715342

版权

ASP.NET专栏同时被 2 个专栏收录

102 篇文章 0 订阅

订阅专栏

JavaScript专栏

31 篇文章 0 订阅

订阅专栏

由于项目需要，在网上收集了不少资料，关于树的拖拽，使用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可拖拽树