zoukankan      html  css  js  c++  java
  • ASPxTreeList及ASPxGridView使用

    ASPxTreeList及ASPxGridView使用

    一.    数据绑定

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

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

    例如:

    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,并设置ExporterTreeListID属性,即导出哪一个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.设置ASPxTreeListPreviewFieldName="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>

    八.    选择事件

    可添加ASPxTreeListFocuseNodeChnaged事件来处理选择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行键值

  • 相关阅读:
    杭州西郊千湖岛-天下第一秀水
    windows phone7 豆瓣FM
    wp7 中 HubTile控件自定义大小。
    wp7 HubTile
    Windows Phone 7之XNA游戏:重力感应
    WP7:模拟开始屏幕Tile漂动效果
    windows 8 项目
    手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画)
    windows8 开发教程 教你制作 多点触控Helper可将任意容器内任意对象进行多点缩放
    仿windows8 开始菜单 实现HubTileBase 以及仿鲜果联播实现 PulsingTile(脉冲磁贴)
  • 原文地址:https://www.cnblogs.com/wander1128/p/2524671.html
Copyright © 2011-2022 走看看