Question

如何通过DXperience TreeList展示数据表的上下级结构

Answer 1

　　概述：此例子为一工程的一个页面，通过

　　此例子为一工程的一个页面，通过DXperience TreeList

　　点击左边树状结构来异步实现子表相关数据展示：

　　

　　点击gridview的数据操作列进行数据操作（使用覆盖效果，覆盖其他内容）：

　　

　　点击排序列的序号进行排序：

　　

　　如果上述数据操作效果以及展示方式符合你的项目需求，那么可以尝试着看下整个页面的实现方式

　　引入dev的相关命名注册空间：

　　aspx页：

　　<%@ Register Assembly="DevExpress.Web.ASPxTreeList.v9.1, Version=9.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

　　Namespace="DevExpress.Web.ASPxTreeList" TagPrefix="dxwtl" %>

　　

　　<%@ Register Assembly="DevExpress.Web.ASPxGridView.v9.1.Export, Version=9.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

　　Namespace="DevExpress.Web.ASPxGridView.Export" TagPrefix="dxwgv" %>

　　

　　<%@ Register Assembly="DevExpress.Web.v9.1, Version=9.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

　　Namespace="DevExpress.Web.ASPxPanel" TagPrefix="dxp" %>

　　

　　<%@ Register Assembly="DevExpress.Web.v9.1, Version=9.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

　　Namespace="DevExpress.Web.ASPxCallbackPanel" TagPrefix="dxcp" %>

　　

　　<%@ Register Assembly="DevExpress.Web.v9.1, Version=9.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

　　Namespace="DevExpress.Web.ASPxClasses" TagPrefix="dxw" %>

　　

　　<%@ Register Assembly="DevExpress.Web.v9.1, Version=9.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

　　Namespace="DevExpress.Web.ASPxTabControl" TagPrefix="dxtc" %>

　　

　　<%@ Register Assembly="DevExpress.Web.ASPxGridView.v9.1, Version=9.1.2.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"

　　Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dxwgv" %>

　　cs页面：

　　using DevExpress.Web.ASPxEditors; using DevExpress.Web.ASPxTabControl; using DevExpress.Web.ASPxTreeList;

　　第一步：左边组织树的实现：

　　上一级。例如中国

　　昌平

　　对应的fieldname)。另外一种方法为一级一级的自主生成数。该实例即使用该方法。

　　aspx:

　　dxwtl:ASPxTreeList ID="devtrlstRole" Height="200px" runat="server" Cursor="default" ClientInstanceName="treelist" AutoGenerateColumns="False" Width="250px" KeyFieldName="ZXTBS" ParentFieldName="MKFLBS">

　　<Columns>

　　<dxwtl:TreeListTextColumn Caption="模块分类名称" FieldName="name" VisibleIndex="0">

　　</dxwtl:TreeListTextColumn>

　　<dxwtl:TreeListTextColumn FieldName="MKFLBS" VisibleIndex="1" Visible="False">

　　</dxwtl:TreeListTextColumn>

　　<dxwtl:TreeListTextColumn FieldName="MXMKBS" VisibleIndex="1" Visible="False">

　　</dxwtl:TreeListTextColumn>

　　</Columns>

　　

　　<SettingsBehavior ExpandCollapseAction="NodeDblClick" AllowFocusedNode="True" AllowSort="False" />

　　<ClientSideEvents FocusedNodeChanged="function(s, e) {

　　onFocusChanged();

　　}" Init="function(s, e) {

　　devcbxgvwDetails.SetVisible(false);

　　}" />

　　

　　</dxwtl:ASPxTreeList>

　　cs:

　　private void TreelistBind() { devtrlstRole.ClearNodes(); DataTable DTChildSys, DTModul; SelectSQL = "select * from DVAA024"; QueryData = DataHandle.ExecuteSQL(SelectSQL); Session["CWW_DT_XTMKJZ"] = QueryData.Tables[0]; DataView DVChildSys = QueryData.Tables[0].DefaultView; string[] ChildSys = { "ZXTBS", "ZXTMC" }; DTChildSys = DVChildSys.ToTable(true, ChildSys); string[] Module = { "ZXTBS", "MKFLBS", "ZXTMC", "MKFLMC" }; DTModul = DVChildSys.ToTable(true, Module); int Count = 0; HashDataCopiedValue = new Hashtable(); for (int i = 0; i < DTChildSys.Rows.Count; i++) { TreeListNode TrlstChildSys = CreateNodeCore(i + 1, DTChildSys.Rows[i]["ZXTMC"].ToString().Trim(), null); TrlstChildSys.Expanded = true; QueryRow = DTModul.Select("ZXTBS='" + DTChildSys.Rows[i]["ZXTBS"].ToString().Trim() + "'"); for (int j = 0; j < QueryRow.Length; j++) { TreeListNode TrlstModule = CreateNodeCore(DTChildSys.Rows.Count + Count + 1, QueryRow[j]["MKFLMC"].ToString().Trim(), TrlstChildSys); HashDataCopiedValue[DTChildSys.Rows.Count + Count + 1] = QueryRow[j]["MKFLBS"].ToString().Trim(); Count++; } } Session["CWW_Hash"] = HashDataCopiedValue; } TreeListNode CreateNodeCore(object key, string name, TreeListNode parentNode) { TreeListNode node = devtrlstRole.AppendNode(key, parentNode); node["name"] = name; return node; }

　　这样我们就实现了aspxtreelist的数据装载，其中需要注意我们在前台页设置了以下属性以及参数来进行下一步的效果实现

　　1.AllowFocusedNode="True"，设置树为可聚焦，主要实现通过聚焦来展示子表数据。