ASPxTreeList及ASPxGridView使用

ASPxTreeList及ASPxGridView使用

一．    数据绑定

 ASPxTreeList和他数据绑定一样，可用各种类型的数据源。但因为要显示树形结构，

所以除了DataSourceID必须进行设置以外，还得必须设置KeyFieldName与ParentFieldName(ASPxGridView只需指定KeyFieldName)，KeyFieldName与ParentFieldName就是主、子的关系，用于创建树形结构。

 

例如：

AspxTreeList配置:

<dx:ASPxTreeList ID="treeList" DataSourceID="objectDataSource" runat="server" KeyFieldName="Id" ParentFieldName="ParentId" >                  

</dx:ASPxTreeList>

 

DataSource配置:

<asp:ObjectDataSource ID="objectDataSource" runat="server" DataObjectTypeName="Entity"

TypeName="Provider" InsertMethod="Insert" DeleteMethod="Delete"

UpdateMethod="Update" SelectMethod="Select">

<UpdateParameters>

     <asp:Parameter Name="Id" />

     <asp:Parameter Name=" ParentId" />

     <asp:Parameter Name="Field1" />

         <asp:Parameter Name="Field2" />

</UpdateParameters>

</asp:ObjectDataSource>

 

后台代码:

    public static class Provider

    {

        private const string key = "EntitiesProvider";

        private static HttpSessionState session = HttpContext.Current.Session;

 

        #region private methods

        private static List<Entity> Data

        {

            get

            {

                if (null == session[key])

                    Restore();

 

                return session[key] as List<Entity>;

            }

        }

 

        private static List<Entity> CreateData()

        {           

        }

 

        private static Entity FindItem(Guid id)

        {

            return Data.Find(Item => Item.Id.ToString().Equals(id.ToString()));

        }

        #endregion

 

        #region public methods

        public static void Restore()

        {

            session[key] = CreateData();

        }

 

        public static IEnumerable Select()

        {

            return Data;

        }

 

        public static void Insert(Entity item)

        {

            item.Id = Guid.NewGuid();

            Data.Add(item);

        }

 

        public static void Update(Entity item)

        {

            Entity storedItem = FindItem(item.Id);

            Data.Remove(storedItem);

            Data.Add(item);

        }

 

        public static void Delete(Entity item)

        {

            Entity storedItem = FindItem(item.Id);

            Data.Remove(storedItem);

        }

        #endregion

    }

 

    [Serializable]

    public class Entity

    {

        /// <summary>

        /// ID

        /// </summary>

        public Guid Id { get; set; }

 

        /// <summary>

        /// 父节点ID

        /// </summary>

        public Guid ParentId { get; set; }

 

        /// <summary>

        /// Field1

        /// </summary>

        public string Field1 { get; set; }

 

        /// <summary>

        /// Field2

        /// </summary>

        public string Field2 { get; set; }

    }

 

同时可以指定在ASPxTreeList默认展开的级数，代码如下：        
        this.ASPxTreeList1.ExpandToLevel(2);   //展开2级

二．    数据导出

关于ASPxTreeList数据导出，DevExpress同样为我们提供了解决方案，即ASPxTreeListExporter数据导出组件。

ASPxTreeListExproter的用法非常简单，同时提供了多种文件格式的导出方案，xls| xlsx|pdf|rft

ASPxGridViewExporter还支持Csv格式导出方案.

使用方法：
1 .向有ASPxTreeList数据的面页添加ASPxTreeListExporter，并设置Exporter的TreeListID属性，即导出哪一个ASPxTreeList.默认不指定的情况下会导出页面中第一个ASPxTreeList，但当有多个时并希望导出指定ASPxTreeList时，则必须指定。

ASPxTreeListExporter

<dx:ASPxTreeListExporter ID="treeListExporter" runat="server" TreeListID="treeList" />

ASPxGridViewExporter

<dx:ASPxGridViewExporter ID="gridViewExporter" runat="server" GridViewID="gridView"/>

 2.指定ASPxTreeListExporter的导出方法，格式文件格式和导出策略不同，ASPxTreeListExporter提供了以下方法：              
                void WritePdf(Stream stream);  
                void WritePdfToResponse();

                void WriteRtf(Stream stream);
                void WriteRtfToResponse();    
                void WriteXls(Stream stream);
                void WriteXlsToResponse();

                void WriteXlsx(Stream stream);
                void WriteXlsxToResponse();

每个方法都有多个重载，可权限需要进行调用。另外需要说明的是，如果ASPxTreeList设置的分页功能，调用以下方法时可能出现只导出当前面的现象，所以调用以上方法进，可以设置导出的详细设置，如下：
                 ASPxTreeListExporter.Settings.ExpandAllNodes = true;
                 ASPxTreeListExporter.Settings.ExportAllPages = true;
                 ASPxTreeListExporter.Settings.ShowTreeButtons = true;

三．    分页设置

默认情况下，ASPxTreeList不进行分页处理，如果需要分面功能，可以设置其属性SettingsPager

如下代码：
                <SettingsPager AlwaysShowPager="True" Mode="ShowPager">
                </SettingsPager>

默认页大小为10，可以通过SettingPager的 PageSize属性设置，PageSize="20"

四．    用户弹出面板设置

即让用户自定义ASPxTreeList显示的字段名称，如下设置
            <SettingsCustomizationWindow Enabled="True" />

如果当某一字段在初始时设置Visible=false，那么此字段将会放在CustomizationWindow中，当然，用户也可以把它拖放出来，也可以拖放进去。以下代码就是控制如果显示与隐藏CustomizationWindow.    
           treeList.ShowCustomizationWindow();    //ClientInstanceName="treeList"
           treeList.HideCustomizationWindow();

例如：

<script type="text/javascript">

        function CwShow() {

            treeList.ShowCustomizationWindow();

            btnCustWin.SetText("Hide Customization Window");

        }

 

        function CwHide() {

            treeList.HideCustomizationWindow();

            btnCustWin.SetText("Show Customization Window");

        }

 

        function CwToggle() {

            if (treeList.IsCustomizationWindowVisible())

                CwHide();

            else

                CwShow();

        }

</script>

 

<dx:ASPxButton ID="ASPxButton1" runat="server"

Text="Show Customization Window"

        AutoPostBack="False" ClientInstanceName="btnCustWin"

        EnableClientSideAPI="True" UseSubmitBehavior="False">

        <ClientSideEvents Click="function(s, e) { CwToggle(); }" />

</dx:ASPxButton>

 

<dx:ASPxTreeList ID="treeList" runat="server"

AutoGenerateColumns="False"

DataSourceID="AccessDataSource1" Width="100%"

        KeyFieldName="ID" ParentFieldName="ParentID" 

        ClientInstanceName="treeList">

        <Columns>       

            <dx:TreeListDataColumn FieldName="Text" Visible="False" />

        </Columns>      

        <SettingsCustomizationWindow Enabled="True"

PopupHorizontalOffset="2" />

        <ClientSideEvents

                 Init="function() { CwShow(); }"

                 CustomizationWindowCloseUp="function() { CwHide(); }" />

    </dx:ASPxTreeList>

五．    样式设置

常用设置如下：

          <Styles AlternatingNode-Enabled="True"></Styles>

           <Settings GridLines="Both"
             ShowFooter="True"
             ShowGroupFooter="True"
             ShowPreview="True" />

 

<SettingsBehavior ExpandCollapseAction="NodeDblClick"

AllowFocusedNode="true" />

   

<SettingsEditing Mode="EditFormAndDisplayNode"

AllowNodeDragDrop="true" AllowRecursiveDelete="true" />

             

ShowPreview可显示数据内容较多的View，不影响TreeList的展示。
             1.设置ASPxTreeList的PreviewFieldName="Location"

或者<Templates><PreviewRow></PreviewRow></Templates>
2.<Settings ShowPreview="True" />

 

ASPxGridView还可以设置

<SettingsDetail ShowDetailRow="true"/>     

        <Templates><DetailRow></DetailRow></Templates>

 

六．    多表头设置

辅助类：

//***********************************************************************

//  File: DynamicHeaderHepler.cs

//  Description: 动态生成多表头帮助类

//***********************************************************************

public class DynamicHeaderHepler

{

    public static void SetAspxGridViewBand(ASPxGridView gridView)

    {

        gridView.HtmlRowCreated +=

new ASPxGridViewTableRowEventHandler(GridView_HtmlRowCreated);

    }

       

static void GridView_HtmlRowCreated(object sender, ASPxGridViewTableRowEventArgs e)

     {

        ASPxGridView gridView = sender as ASPxGridView;

        if (e.RowType == GridViewRowType.Data &&

e.VisibleIndex == gridView.PageIndex * gridView.SettingsPager.PageSize)

        {

            Table table = e.Row.Parent as Table;

            if (table != null)

            {

                TableRow row = new TableRow();

                TableCell firstBand = GetNewTableCell(row, string.Empty);

                foreach (GridViewDataColumn col in gridView.Columns)

                {

                    if (col.Name.IndexOf("|") > 0)

                    {

                         string bandname = col.Name.Substring(0, col.Name.IndexOf("|"));

                         TableCell band = null;

                         foreach (TableCell t in row.Cells)

                         {

                            if (t.Text == bandname)

                            {

                                band = t;

                                break;

                            }

                        }

 

                        if (band == null)

                            band = GetNewTableCell(row, bandname);

 

                        col.Caption = col.Name.Substring(col.Name.IndexOf("|") + 1);

                        band.ColumnSpan++;

                    }

                    else

                        firstBand.ColumnSpan++;

                }

 

                table.Rows.AddAt(0, row);

            }

        }

    }

   

//可以在此修改单元格样式

    private static TableCell GetNewTableCell(TableRow row, string bandname)

    {

        TableCell band = new TableCell();

        band.Text = bandname;

        row.Cells.Add(band);

        band.CssClass = "dxgvHeader_Aqua";

        band.HorizontalAlign = HorizontalAlign.Center;

        band.BorderStyle = BorderStyle.NotSet;

        band.BorderColor = row.BorderColor;           

 

        return band;

     }

}

 

服务端：

DynamicHeaderHepler.SetAspxGridViewBand(gridView);

gridView.DataBind();

 

客户端：

<Columns>                                          

   <dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列1|列11"

Name="列1|列11"></dx:GridViewDataHyperLinkColumn>                                         

<dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列1|列12"

Name="列1|列12"> </dx:GridViewDataHyperLinkColumn>

<dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列2|列21"

Name="列2|列21"> </dx:GridViewDataHyperLinkColumn>

<dx:GridViewDataHyperLinkColumn FieldName="Field10" Caption="列2|列22"

Name="列2|列22"> </dx:GridViewDataHyperLinkColumn>

</Columns>

七．    其它设置

每行增加增删改按钮:

<dx:TreeListCommandColumn UpdateButton-Text="提交" CancelButton-Text="取消">

<NewButton Text="新增" Visible="true"></NewButton>

<EditButton Text="修改" Visible="true"></EditButton>

<DeleteButton Text="删除" Visible="true"></DeleteButton>

</dx:TreeListCommandColumn>

 

自定义EditForm:

在配置Columns时通过EditFormSettings设置当前列在EditForm中的显示样式，如下

<dx:TreeListMemoColumn FieldName="Text" Visible="False">

         <EditFormSettings VisibleIndex="3" ColumnSpan="2" Visible="true" />

         <PropertiesMemo Rows="6" />

         <EditFormCaptionStyle VerticalAlign="top" />

</dx:TreeListMemoColumn>

或者通过模板设置，如下

<Templates>

         <EditForm>

                   <dx:ASPxPageControl ID="tabs" runat="server" ActiveTabIndex="0" Width="100%">

                            <TabPages>

                                     <dx:TabPage Text="Headers">

                                               <ContentCollection>

                                                        <dxw:ContentControl runat="server">                    

                                                                 <dx:ASPxTreeListTemplateReplacement runat="server" ReplacementType="Editors" />

                                                        </dxw:ContentControl>

                                               </ContentCollection>

                                     </dx:TabPage>

                                     <dx:TabPage Text="Message">

                                              <ContentCollection>

                                                        <dxw:ContentControl runat="server">

                                                                 <dxe:ASPxMemo ID="message" runat="server" AutoResizeWithContainer="True"

                                                                           Height="200px" Width="100%"

                                                                           Text='<%# Eval("Field2") %>' />

                                                        </dxw:ContentControl>

                                               </ContentCollection>

                                     </dx:TabPage>

                            </TabPages>

                   </dx:ASPxPageControl>

                   <div style="text-align: right; padding-top: 8px">

                            <dx:ASPxTreeListTemplateReplacement runat="server" ReplacementType="UpdateButton" />

                            <dx:ASPxTreeListTemplateReplacement runat="server" ReplacementType="CancelButton" />                                      

                   </div>

         </EditForm>

</Templates>

八．    选择事件

可添加ASPxTreeList的FocuseNodeChnaged事件来处理选择Node时的逻辑，但ASPxTreeList必须设置AllowFocusedNode=true，如下：
         <SettingsBehavior AllowFocusedNode="True" />

通过FocuseNodeChnaged事件来回调ASPxTreeList的服务端事件来完成通信，如下：

客户端：
        <ClientSideEvents CustomDataCallback="function(s, e) {
         alert(e.result);
        }"

FocusedNodeChanged="function(s, e) {
         var key = treeList.GetFocusedNodeKey();
       treeList.PerformCustomDataCallback(key); 
  }" />

 

服务端：

   protected void treeList_CustomDataCallback(object sender, TreeListCustomDataCallbackEventArgs e)

    {

        string key = e.Argument.ToString();

        TreeListNode node = (sender as ASPxTreeList).FindNodeByKeyValue(key);

        e.Result = node.GetValue("Field1");

}

 

ASPxGridView这些工作都可以在客户端完成

如下：

<script language="javascript" type="text/javascript">   

        function RowClickHandler() {

           gridView.GetRowValues(gridView.GetFocusedRowIndex(), 'Field1; Field2', OnGetRowValues);

        }

 

        function OnGetRowValues(values) {

            alert(values[0]);

            alert(values[1]);

        }

    </script>

 

<dx:ASPxGridView ID="gridView" runat="server" AutoGenerateColumns="False" ClientInstanceName=" gridView "                                                DataSourceID="supplyBusinessScopeDataSource" KeyFieldName="Id">

     <SettingsBehavior EnableRowHotTrack="True" AllowFocusedRow="True" />

     <Columns>                                        <dx:GridViewDataTextColumn FieldName="Field1" Visible="True">                                                     </dx:GridViewDataTextColumn>

<dx:GridViewDataTextColumn FieldName="Field2" Visible="True">                                                     </dx:GridViewDataTextColumn>

    </Columns>

    <ClientSideEvents RowClick="RowClickHandler" />

</dx:ASPxGridView>

 

以下代码设置为可多选，并且可以递归选择。
        <SettingsSelection Enabled="True" Recursive="True" />

 

九．    客户端方法总结

ASPxTreeList:

var key = treeList.GetFocusedNodeKey();         //获取选中行的键值
treeList.PerformCustomDataCallback(key);        //回调服务端方法

ASPxGridView:

gridView.PerformCallback ();    //Callback

gridView.SelectRows();      //选择全部行

gridView.UnselectRows();   //取消全部行选中状态

gridView.SelectAllRowsOnPage();    //选择当前页全部行

gridView.UnselectAllRowsOnPage(); //取消当前页全部行选中状态

 

十．    服务端方法总结

ASPxTreeList:
TreeListNode node = treeList.FindNodeByKeyValue(key);     //根据键值获取结点

  string value = node.GetValue("Field1"); //根据字段名获取数据

 

ASPxGridView:

gridView.GetMasterRowKeyValue(); //获取Master行键值