UltraWebTree的递归绑定和节点拖动

最新推荐文章于 2017-03-14 14:00:37 发布
转载 最新推荐文章于 2017-03-14 14:00:37 发布 · 2k 阅读 · 1
文章标签：

#generator #javascript #server #null #border #table

本文介绍了一个使用HTML和JavaScript实现的TreeView控件示例，该控件支持节点间的拖拽操作，并展示了如何通过代码绑定数据源来填充TreeView。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.html代码
<HTML>
    <HEAD>
        <title>TreeView</title>
        <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        <meta content="C#" name="CODE_LANGUAGE">
        <meta content="JavaScript" name="vs_defaultClientScript">
        <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">        
        <SCRIPT type="text/javascript">    
        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>
        <form id="Form1" method="post" runat="server">
            <TABLE id="Table1" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
                
                <TR vAlign="top" height="100%">
                    <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">
                            <SelectedNodeStyle ForeColor="White" BackColor="DarkBlue"></SelectedNodeStyle>
                            <Padding Top="5px"></Padding>
                            <Levels>
                                <ignav:Level Index="0"></ignav:Level>
                                <ignav:Level Index="1"></ignav:Level>
                                <ignav:Level Index="2"></ignav:Level>
                            </Levels>
                            <Styles>
                                <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 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;

            }
            
    }
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
10-22
通过不同的选择器和方法，开发者可以精确地定位到DOM树中的特定节点，并进行相应的操作，如修改样式、内容更新、事件绑定等。 以上内容围绕了一段具体的HTML代码，通过这段代码的分析，我们能够更加直观地理解如何...
C#TreeView数据库绑定+拖动
09-02
在本项目中，"C# TreeView 数据库绑定+拖动"涉及到的核心技术是如何将数据库中的数据动态加载到TreeView控件，并实现子节点的拖放功能。下面将详细阐述这两个主要知识点。 1. **C# TreeView 控件与数据库绑定** ...
动态加载UltraWebTree
键键的专栏
09-05 1633
数据库表结构为：表名：treeTable字段：L_ID：主键IDL_Name：树中显示的菜单名P_L_ID：属于某个菜单L_Page：导向路径L_PageName：文件名示例数据： L_ID L_Name
UltraWebTree的使用心得
weixin_30889885的博客
04-15 212
standard_add.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sta_edit.aspx.cs" Inherits="hbproject.standard.sta_edit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti...
一个通用的绑定UltraWebTree树结构
dacong的专栏
09-06 2881
    UltraWebTree是Infragistics   NetAdvantage for .net第三方UI控件库中的树型控件,功能强大,对客户端支持很好.在程序开发中经常要用到树,用来分层过滤数据,现在写一个通用的方法,实现无现层的树结构. 一.定义一个树结点存储的对象,存放在节点DataKey属性中 [Serializable()]    public class tnod
UltraWebTree默认展开节点
专心做技术
07-11 1112
      昨天项目经理讲说要将项目中的树形打开的时候，默认展开。      今天花一个上午的时间来琢磨了一下，发现如下：      右击UltraWebTree选择Quick Design-->Control Settings-->UltraWebTree-->InitialExpandDepth默认设置是0，如果你想再展示一层的话，将该值设置为1，OK保存，以此根据你的需求类推。
C#实现TreeView绑定数据库并支持节点拖动
在这个过程中，递归绑定是一个常用的技术，用于处理层次化的数据结构。通过递归方法，我们可以遍历数据库中的所有层级数据，并将每一行数据映射为TreeView中的一个节点。每个父节点下都可以动态地添加子节点，并且这...
递归实现数据与tree控件的无限绑定
8. 用户交互：实现用户交互功能，如节点点击事件、拖拽操作、右键菜单等，增强tree控件的可用性和用户体验。 总结以上知识点，数据绑定到tree控件上是一个涉及前端UI控件、后端数据库、数据处理和算法实现等多个...
动态树形图：递归算法与ASP.NET TreeView的实战应用
5. 用户交互与性能优化：考虑用户交互体验，例如展开/折叠节点、拖拽节点重新排序等，同时关注性能，确保在大数据量下也能流畅运行。 实验结果显示，这种方法不仅有效，而且极大地提高了ASP.NET开发人员在创建Web...
用showModalDialog弹出窗口和UltraWebTree树实现的行政区域（省,市,县）选择
weixin_30377461的博客
04-19 143
行政区域的省,市,县选择一般多用DropDownlist的三级联动就可以了，技术经理说那个不是很好，对于当前的项目。 要做成showModalDialog弹出窗口根据树展开进行选择，然后返回行政区域的全名和地区代码。 实现过程： 新建一个用户控件DistrictSelect.ascx；cs没有代码的 HTMLCode 1<%@ControlLanguage="C#"Auto...
bootstrap-Treeview实现级联勾选
江先生的博客
03-14 1万+
核心方法 var nodeCheckedSilent = false; function nodeChecked (event, node){ if(nodeCheckedSilent){ return; } nodeCheckedSilent = true; checkAllParent(node); checkAllSon(node)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值