UltraWebTree的递归绑定和节点拖动-优快云博客

本文介绍了一个使用HTML和JavaScript实现的TreeView控件，该控件支持节点的拖拽功能。文章提供了完整的源代码示例，包括HTML页面结构、内嵌JavaScript事件处理函数以及后台C#代码，展示了如何在TreeView中实现节点的拖拽与放置操作。

1.html代码

<HTML>

<HEAD>

<title>TreeView</title>

function UltraWebTree1_DragStart(oTree, oNode, oDataTransfer, oEvent)

{

//debugger;

oDataTransfer.dataTransfer.setData("Text", oNode.getText());

oDataTransfer.dataTransfer.effectAllowed = "move";

}

function UltraWebTree1_Drop(oTree, oNode, oDataTransfer, oEvent)

{

//debugger;

if(oNode.getParent()!=null)

{

alert("Please make sure that the form is moved to a case and try again.");

return false;

}

var sourceNode = oDataTransfer.sourceObject;

if(sourceNode.getParent()==null)

{

alert("Please make sure that the form is moved to a case and try again.");

return false;

}

oNode.addChild(oDataTransfer.dataTransfer.getData("Text"));

oNode.setExpanded(true);

if(sourceNode)

{

sourceNode.remove();

}

return false;

}

</SCRIPT>

</HEAD>

<body>

<TD colSpan="2"><ignav:ultrawebtree id="UltraWebTree1" runat="server" AllowDrop="True" AllowDrag="True" BorderStyle="Groove"

BackColor="#E0E0E0" BrowserTarget="Auto" Cursor="hand" WebTreeTarget="HierarchicalTree" AutoPostBack="False"

Editable="False" Height="100%" Width="100%" BorderWidth="3px">

<ignav:Level Index="0"></ignav:Level>

<ignav:Level Index="1"></ignav:Level>

<ignav:Level Index="2"></ignav:Level>

</Levels>

<ignav:Style CssClass="DefaultItemClass"></ignav:Style>

<ignav:Style Cursor="Hand" Font-Underline="True" Font-Names="Arial" ForeColor="#FF8000" BackColor="PaleGoldenrod"

CssClass="HoverClass"></ignav:Style>

<ignav:Style ForeColor="White" BackColor="Tan" CssClass="HiliteClass"></ignav:Style>

</Styles>

<ClientSideEvents AfterNodeSelectionChange="AfterNodeSelChange" DragStart="UltraWebTree1_DragStart"

Drop="UltraWebTree1_Drop"></ClientSideEvents>

</ignav:ultrawebtree></TD>

</TR>

</TABLE>

</form>

</body>

</HTML>

2.cs代码

//using Infragistics.WebUI.UltraWebNavigator;

public class TreeView : System.Web.UI.Page

{

protected Infragistics.WebUI.UltraWebNavigator.UltraWebTree UltraWebTree1;

private void Page_Load(object sender, System.EventArgs e)

{

if(!Page.IsPostBack)

{

UltraWebTree1.Nodes.Clear();

BindTree(UltraWebTree1.Nodes,ds.Tables[0],"0");

}

private void BindTree(Infragistics.WebUI.UltraWebNavigator.Nodes Nds,DataTable dt,string id)

{

DataView dv = new DataView(dt);

dv.RowFilter = "parentid = '"+id.ToString()+"'";

Node node;

foreach(DataRowView drv in dv)

{

node=new Node();

node.Tag=drv["id"].ToString();

node.Text=drv["name"].ToString();

node.Expanded=true;

Nds.Add(node);

BindTree(node.Nodes,dt,drv["id"].ToString());

}

Web Form Designer generated code#region Web Form Designer generated code

override protected void OnInit(EventArgs e)

{

// CODEGEN: This call is required by the ASP.NET Web Form Designer.

InitializeComponent();

base.OnInit(e);

}

/**//// <summary>

/// Required method for Designer support - do not modify

/// the contents of this method with the code editor.

/// </summary>

private void InitializeComponent()

{

this.Load += new System.EventHandler(this.Page_Load);

}

#endregion

GetData#region GetData

private DataTable GetData()

{

DataTable dt;

dt = new DataTable();

dt.Columns.Add("id");

dt.Columns.Add("parentid");

dt.Columns.Add("name");

DataRow dr;

dr = dt.NewRow();

dr["id"] = "1";

dr["parentid"] = "0";

dr["name"] = "a";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["id"] = "2";

dr["parentid"] = "1";

dr["name"] = "b";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["id"] = "3";

dr["parentid"] = "1";

dr["name"] = "c";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["id"] = "4";

dr["parentid"] = "2";

dr["name"] = "d";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["id"] = "5";

dr["parentid"] = "2";

dr["name"] = "e";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["id"] = "6";

dr["parentid"] = "3";

dr["name"] = "f";

dt.Rows.Add(dr);

return dt;

}

转载于:https://blog.51cto.com/657956565/198881