zoukankan      html  css  js  c++  java
  • DevExpress Asp.net ASPxTreeList的基本使用之一

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/wServices/archive/2009/07/25/4378771.aspx

    DevExpress Asp.net ASPxTreeList的基本使用之一  

    2010-10-06 15:42:48|  分类: DevExpress控件|字号 订阅

    此事例主要说明了ASPxTreeList的一些基本使用
            1 数据绑定
            2 数据导出
            3 分页设置
            4 用户弹出面板设置
            5 样式设置
            6 ShowPreview
            8 数据模板
            9 选择事件
            10 数据统计
            
            
            绑定绑定
            ASPxTreeList其他数据绑定一样,可用各种类型的数据源。但因为要显示树形结构,
            所以除了DataSourceID必须进行设置以外,还得必须设置KeyFieldName与ParentFieldName,
            KeyFieldName与ParentFieldName就是主、子的关系,用于创建树形结构。
            同时可以指定在ASPxTreeList默认展开的级数,代码如下:        
            this.ASPxTreeList1.ExpandToLevel(2);   //展开2级
             
            数据导出
            关于ASPxTreeList数据导出,DevExpress同样为我们提供了解决方案,即ASPxTreeListExporter,
            数据导出组件。
            ASPxTreeListExproter的用法非常简单,但同时提供了3种文件格式的导出方案,xls|pdf|rft
            使用方法:
                1 向有ASPxTreeList数据的面页添加ASPxTreeListExporter,并设置Exporter的TreeListID属
                  性,即导出哪一个ASPxTreeList.默认不指定的情况下会导出页面中第一个ASPxTreeList,但
                  当有多个时并希望导出指定ASPxTreeList时,则必须指定。
                2 指定ASPxTreeListExporter的导出方法,格式文件格式和导出策略不同,ASPxTreeListExporter
                  提供了以下方法:
                  
                    void WritePdf(Stream stream);  
                    void WritePdfToResponse();

                    void WriteRtf(Stream stream);
                    void WriteRtfToResponse();
             
                    void WriteXls(Stream stream);
                    void WriteXlsToResponse();
                   每个方法都有多个重载,可权限需要进行调用。另外需要说明的是,如果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();
                         
               样式设置
               样式设置最基本就是设置边框样式、页脚、tree线等。如下
               <Settings GridLines="Both"
                 ShowFooter="True"
                 ShowGroupFooter="True"
                 ShowPreview="True" />
                 
              ShowPreview
              可显示数据内容较多的View,不影响TreeList的展示。
                1 设置ASPxTreeList的PreviewFieldName="Location"
                2  <Settings ShowPreview="True" />
             
             数据模板  
             <Templates>
             <DataCell>
              <%# Eval("Common_Name") %>
                </DataCell>
            </Templates>
            
            选择事件
            可添加treelist的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); 
            }" />
              
             以下代码设置为可多选,并且可以递归选择。
            <SettingsSelection Enabled="True" Recursive="True" />
            
            
            数据统计
             <Summary>
                <dxwtl:TreeListSummaryItem 
                DisplayFormat="Count={0}"   //显示格式
                FieldName="Department"      //数据统计字段
                ShowInColumn="Department"   //显示的位置字段
                SummaryType="Count" />      //统计类型
                <dxwtl:TreeListSummaryItem DisplayFormat="Sum={0:C}" FieldName="Budget" 
                    ShowInColumn="Budget" SummaryType="Sum" />
            </Summary>
            
            ASPxTreeList的数据统计显示与ASPxGridview基本相同。

    代码:

    view plaincopy to clipboardprint?
    01.<mce:script type="text/javascript"><!--   
    02.       function CwShow() {   
    03.           treeList.ShowCustomizationWindow();   
    04.           btnCustWin.SetText("Hide Customization Window");   
    05.       }   
    06.       function CwHide() {   
    07.           treeList.HideCustomizationWindow();   
    08.           btnCustWin.SetText("Show Customization Window");   
    09.       }   
    10.       function CwToggle() {   
    11.           if (treeList.IsCustomizationWindowVisible())   
    12.               CwHide();   
    13.           else  
    14.               CwShow();   
    15.       }   
    16.      
    17./ --></mce:script>  
     <mce: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();
            }
        
    // --></mce:script>

    HTML:

    view plaincopy to clipboardprint?
    ·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······15001.    <dxe:ASPxButton ID="ASPxButton1" runat="server" OnClick="ASPxButton1_Click" Text="Export to XLS">  
    02.    </dxe:ASPxButton>  
    03.    <dxe:ASPxButton ID="ASPxButton2" runat="server" OnClick="ASPxButton2_Click" Text="Export to PDF">  
    04.    </dxe:ASPxButton>  
    05.    <dxe:ASPxButton ID="ASPxButton3" runat="server" AutoPostBack="false" Text="Show Customer Window">  
    06.        <ClientSideEvents Click="function(s, e) { CwToggle(); }" />  
    07.    </dxe:ASPxButton>  
    08.       
    09.    <dxwtl:ASPxTreeListExporter ID="ASPxTreeListExporter1" runat="server" TreeListID="ASPxTreeList2"> 
    10.    </dxwtl:ASPxTreeListExporter>  
    11.       
    12.    <dxwtl:ASPxTreeList ID="ASPxTreeList1" runat="server" AutoGenerateColumns="False"  
    13.        ClientInstanceName="treeList" DataSourceID="AccessDataSource1"    
    14.        Width="100%" KeyFieldName="ID"  
    15.        ParentFieldName="ParentID" PreviewFieldName="Location"    
    16.        oncustomdatacallback="ASPxTreeList1_CustomDataCallback">  
    17.        <ClientSideEvents CustomDataCallback="function(s, e) {   
    18.    alert(e.result);   
    19.}" FocusedNodeChanged="function(s, e) {   
    20.    var key = treeList.GetFocusedNodeKey();   
    21.            treeList.PerformCustomDataCallback(key);    
    22.}" />  
    23.        <Columns>  
    24.            <dxwtl:TreeListTextColumn FieldName="Department" VisibleIndex="1">  
    25.            </dxwtl:TreeListTextColumn>  
    26.            <dxwtl:TreeListTextColumn FieldName="Budget" VisibleIndex="2" AllowSort="True" SortIndex="0"  
    27.                SortOrder="Ascending">  
    28.            </dxwtl:TreeListTextColumn>  
    29.            <dxwtl:TreeListTextColumn FieldName="Location" VisibleIndex="3">  
    30.            </dxwtl:TreeListTextColumn>  
    31.            <dxwtl:TreeListTextColumn FieldName="Phone1" VisibleIndex="4">  
    32.            </dxwtl:TreeListTextColumn>  
    33.            <dxwtl:TreeListTextColumn FieldName="Phone2" VisibleIndex="5" Visible="false">  
    34.            </dxwtl:TreeListTextColumn>  
    35.        </Columns>  
    36.        <SettingsSelection Enabled="True" Recursive="True" />  
    37.        <Summary>  
    38.            <dxwtl:TreeListSummaryItem DisplayFormat="Count={0}" FieldName="Department"    
    39.                ShowInColumn="Department" SummaryType="Count" />  
    40.            <dxwtl:TreeListSummaryItem DisplayFormat="Sum={0:C}" FieldName="Budget"    
    41.                ShowInColumn="Budget" SummaryType="Sum" />  
    42.        </Summary>  
    43.        <SettingsPager AlwaysShowPager="True" Mode="ShowPager" PageSize="20">  
    44.        </SettingsPager>  
    45.        <Settings GridLines="Both" ShowFooter="True" ShowGroupFooter="True" ShowPreview="True" />  
    46.        <SettingsBehavior ExpandCollapseAction="NodeDblClick" AllowFocusedNode="True" />  
    47.        <SettingsCustomizationWindow Enabled="True" />  
    48.    </dxwtl:ASPxTreeList>  
    49.    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/DataSources/Departments.mdb"  
    50.        SelectCommand="SELECT * FROM [Departments]" />  
    51.           
    52.    <dxwtl:ASPxTreeList ID="ASPxTreeList2" runat="server" AutoGenerateColumns="False"  
    53.        DataSourceID="SiteMapDataSource1">  
    54.        <SettingsPager AlwaysShowPager="True" ShowSeparators="True" Mode="ShowPager">  
    55.        </SettingsPager>  
    56.        <Columns>  
    57.            <dxwtl:TreeListTextColumn FieldName="Title" ReadOnly="True" VisibleIndex="1">  
    58.            </dxwtl:TreeListTextColumn>  
    59.            <dxwtl:TreeListTextColumn FieldName="Url" ReadOnly="True" VisibleIndex="2">  
    60.            </dxwtl:TreeListTextColumn>  
    61.            <dxwtl:TreeListTextColumn FieldName="Description" ReadOnly="True" VisibleIndex="3">  
    62.            </dxwtl:TreeListTextColumn>  
    63.        </Columns>  
    64.    </dxwtl:ASPxTreeList>  
    65.       
    66.    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />  
        <dxe:ASPxButton ID="ASPxButton1" runat="server" OnClick="ASPxButton1_Click" Text="Export to XLS">
        </dxe:ASPxButton>
        <dxe:ASPxButton ID="ASPxButton2" runat="server" OnClick="ASPxButton2_Click" Text="Export to PDF">
        </dxe:ASPxButton>
        <dxe:ASPxButton ID="ASPxButton3" runat="server" AutoPostBack="false" Text="Show Customer Window">
            <ClientSideEvents Click="function(s, e) { CwToggle(); }" />
        </dxe:ASPxButton>
        
        <dxwtl:ASPxTreeListExporter ID="ASPxTreeListExporter1" runat="server" TreeListID="ASPxTreeList2">
        </dxwtl:ASPxTreeListExporter>
        
        <dxwtl:ASPxTreeList ID="ASPxTreeList1" runat="server" AutoGenerateColumns="False"
            ClientInstanceName="treeList" DataSourceID="AccessDataSource1" 
            Width="100%" KeyFieldName="ID"
            ParentFieldName="ParentID" PreviewFieldName="Location" 
            oncustomdatacallback="ASPxTreeList1_CustomDataCallback">
            <ClientSideEvents CustomDataCallback="function(s, e) {
     alert(e.result);
    }" FocusedNodeChanged="function(s, e) {
     var key = treeList.GetFocusedNodeKey();
       treeList.PerformCustomDataCallback(key); 
    }" />
            <Columns>
                <dxwtl:TreeListTextColumn FieldName="Department" VisibleIndex="1">
                </dxwtl:TreeListTextColumn>
                <dxwtl:TreeListTextColumn FieldName="Budget" VisibleIndex="2" AllowSort="True" SortIndex="0"
                    SortOrder="Ascending">
                </dxwtl:TreeListTextColumn>
                <dxwtl:TreeListTextColumn FieldName="Location" VisibleIndex="3">
                </dxwtl:TreeListTextColumn>
                <dxwtl:TreeListTextColumn FieldName="Phone1" VisibleIndex="4">
                </dxwtl:TreeListTextColumn>
                <dxwtl:TreeListTextColumn FieldName="Phone2" VisibleIndex="5" Visible="false">
                </dxwtl:TreeListTextColumn>
            </Columns>
            <SettingsSelection Enabled="True" Recursive="True" />
            <Summary>
                <dxwtl:TreeListSummaryItem DisplayFormat="Count={0}" FieldName="Department" 
                    ShowInColumn="Department" SummaryType="Count" />
                <dxwtl:TreeListSummaryItem DisplayFormat="Sum={0:C}" FieldName="Budget" 
                    ShowInColumn="Budget" SummaryType="Sum" />
            </Summary>
            <SettingsPager AlwaysShowPager="True" Mode="ShowPager" PageSize="20">
            </SettingsPager>
            <Settings GridLines="Both" ShowFooter="True" ShowGroupFooter="True" ShowPreview="True" />
            <SettingsBehavior ExpandCollapseAction="NodeDblClick" AllowFocusedNode="True" />
            <SettingsCustomizationWindow Enabled="True" />
        </dxwtl:ASPxTreeList>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/DataSources/Departments.mdb"
            SelectCommand="SELECT * FROM [Departments]" />
            
        <dxwtl:ASPxTreeList ID="ASPxTreeList2" runat="server" AutoGenerateColumns="False"
            DataSourceID="SiteMapDataSource1">
            <SettingsPager AlwaysShowPager="True" ShowSeparators="True" Mode="ShowPager">
            </SettingsPager>
            <Columns>
                <dxwtl:TreeListTextColumn FieldName="Title" ReadOnly="True" VisibleIndex="1">
                </dxwtl:TreeListTextColumn>
                <dxwtl:TreeListTextColumn FieldName="Url" ReadOnly="True" VisibleIndex="2">
                </dxwtl:TreeListTextColumn>
                <dxwtl:TreeListTextColumn FieldName="Description" ReadOnly="True" VisibleIndex="3">
                </dxwtl:TreeListTextColumn>
            </Columns>
        </dxwtl:ASPxTreeList>
        
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

    C#代码:

    view plaincopy to clipboardprint?
    01.{         
    02.       if (!IsPostBack)   
    03.       {   
    04.           DataBind();   
    05.           this.ASPxTreeList1.ExpandToLevel(2);   
    06.       }   
    07.   }   
    08.  
    09.   // 导出xls   
    10.   protected void ASPxButton1_Click(object sender, EventArgs e)   
    11.   {   
    12.       ASPxTreeListExporter1.WriteXlsToResponse();   
    13.   }   
    14.  
    15.   //导出pdf   
    16.   protected void ASPxButton2_Click(object sender, EventArgs e)   
    17.   {   
    18.       ASPxTreeListExporter1.Settings.ExpandAllNodes = true;   
    19.       ASPxTreeListExporter1.Settings.ExportAllPages = true;   
    20.       ASPxTreeListExporter1.Settings.ShowTreeButtons = true;   
    21.       ASPxTreeListExporter1.WritePdfToResponse();   
    22.   }   
    23.  
    24.  
    25.   protected void ASPxTreeList1_CustomDataCallback(object sender, DevExpress.Web.ASPxTreeList.TreeListCustomDataCallbackEventArgs e)   
    26.   {   
    27.       e.Result = "Key=" + e.Argument;   
    28.   } 

  • 相关阅读:
    选项卡自动切换(定时器demo)
    JS基础——选项卡套选项卡(函数传参)
    JS基础——修改文本框的值(函数传参)
    JS基础——选项卡列表显示隐藏缩略图(函数传参)
    js基础——图片切换实例(函数传参)
    JS 获取元素的属性值,非内联样式
    css position 定位
    ie6-7 overflow:hidden失效问题的解决方法
    Vue自带的过滤器
    Vue数据绑定
  • 原文地址:https://www.cnblogs.com/ydfq-home/p/5017457.html
Copyright © 2011-2022 走看看