DevExpress控件使用系列--ASPxTreeList

 

1. 控件功能 結合列表控件及樹控件的優點，在列表控件中實現類型樹的多層級操作
   
2. 官方說明 http://documentation.devexpress.com/#AspNet/clsDevExpressWebASPxTreeListASPxTreeListtopic
3. 使用說明
1. 綁定的數據源需具備當前節點編號、父級節點編號等字段
2. 通過設置屬性下列屬性控件自動實現層級關系，初始化只顯示第一層，可通過+/-圖標展開/收縮層級關系
   KeyFieldName="Id"  ParentFieldName ="ParentId"
4. 代碼示例
1. aspx界面設置
   <dx:ASPxTreeList ID="treeList" runat="server" AutoGenerateColumns="False" KeyFieldName="CategoryId"
           Width="100%" ParentFieldName="ParentId" ClientInstanceName="treeList" OnNodeDeleting="TreeList_NodeDeleting"
           OnNodeInserting="TreeList_NodeInserting" OnNodeUpdating="TreeList_NodeUpdating"
           OnCellEditorInitialize="TreeList_CellEditorInitialize" OnNodeValidating="TreeList_NodeValidating"
           OnHtmlDataCellPrepared="treeList_HtmlDataCellPrepared"  OnCommandColumnButtonInitialize="treeList_CommandColumnButtonInitialize"
           >
           <Columns>
               <dx:TreeListDataColumn FieldName="Name" Caption="名稱">
               </dx:TreeListDataColumn>
               <dx:TreeListComboBoxColumn FieldName="Status" Caption="類型">
               </dx:TreeListComboBoxColumn>
               <dx:TreeListCommandColumn Caption="編輯功能">
                   <EditButton Visible="true" Text="編輯">
                   </EditButton>
               </dx:TreeListCommandColumn>
               <dx:TreeListCommandColumn Caption="新建功能">
                   <NewButton Visible="true" Text="新建">
                   </NewButton>
               </dx:TreeListCommandColumn>
               <dx:TreeListCommandColumn Caption="刪除功能">
                   <DeleteButton Visible="true" Text="刪除">
                   </DeleteButton>
               </dx:TreeListCommandColumn>
           </Columns>
           <SettingsEditing Mode="PopupEditForm" />
           <SettingsPopupEditForm Caption="編輯" Width="500" Modal="true" HorizontalAlign="Center"
               VerticalAlign="WindowCenter" />
           <SettingsBehavior AllowFocusedNode="True" AllowDragDrop="false" ProcessSelectionChangedOnServer="false" />
           <Settings ShowTreeLines="true" GridLines="Horizontal" />
           <SettingsText CommandEdit="編輯" RecursiveDeleteError="該節點有子節點，不能刪除" CommandNew="新建資源"
               ConfirmDelete="確定要刪除嗎?" CommandUpdate="更新" CommandDelete="刪除" CommandCancel="取消" />
       </dx:ASPxTreeList> RecursiveDeleteError屬性：當點擊刪除鏈接時，控件會自動判斷是否有子節點，如有則給與提示並不觸發刪除事件
   
2. aspx.cs后台代碼設置 
1. 綁定數據
   this.treeList.DataSource =數據源
    this.treeList.DataBind()
   
2. HtmlDataCellPrepared事件（對每個單元格進行處理，通常用於根據類型編號顯示文字描述）

    protected void treeList_HtmlDataCellPrepared(object sender, TreeListHtmlDataCellEventArgs e)

       {

           if (e.Column.FieldName == "Status")

           {

               switch (e.CellValue.ToInt())

               {

                   case 1:

                       e.Cell.Text = "正常";

                       break;

                   case 0:

                       e.Cell.Text = "禁用";

                       break;

                   default:

                       e.Cell.Text = "未知";

                       break;

               }

           }

       }
   
3. CommandColumnButtonInitialize事件（用於根據條件對命令按鈕進行處理，如隱藏/顯示新增、編輯、刪除鏈接等）
    protected void treeList_CommandColumnButtonInitialize(object sender, TreeListCommandColumnButtonEventArgs e)
       {
           if (e.NodeKey != null)
           {
               // Level不等於1的數據行，隱藏新增按鈕
               TreeListNode node = this.treeList.FindNodeByKeyValue(e.NodeKey.ToString());  // e.NodeKey 主鍵值
               if (node.GetValue("Level").ToInt() != 1 && e.ButtonType == TreeListCommandColumnButtonType.New)
               {
                   e.Visible = DefaultBoolean.False;
               }
           }
       }
   
4. CellEditorInitialize事件（新增/編輯窗體初始化，代碼為初始化 Status列的值 ）
       protected void TreeList_CellEditorInitialize(object sender, DevExpress.Web.ASPxTreeList.TreeListColumnEditorEventArgs e)

       {

           if (e.Column.FieldName == "Status")

           {

               var combo = e.Editor as ASPxComboBox;

               combo.Items.Add("1", 1);

               combo.Items.Add("0", 0);

               combo.SelectedIndex = 0;

    

               if (this.treeList.IsEditing)

               {

                   combo.SetComboboxChecked(e.Value.ToInt());

               }

           }

       }
   
5. NodeInserting事件 （新增事件）

     protected void TreeList_NodeInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e)

       {

       }
   
   6、 NodeUpdating事件（修改事件）

       protected void TreeList_NodeUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e)

       {     }
   
   7、 NodeDeleting事件（刪除事件）

   protected void TreeList_NodeDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e)

       {}
   

   8、 NodeValidating事件（驗證事件，新增或修改前觸發此事件進行驗證，驗證通過再觸發 新增、修改事件）

    protected void TreeList_NodeValidating(object sender, DevExpress.Web.ASPxTreeList.TreeListNodeValidationEventArgs e)

       {

    if (b.Value || b == null)

               {

                   AddError(e.Errors, "Name", "名稱已存在，請勿重復添加.");

               }

     if (string.IsNullOrEmpty(e.NodeError) && e.Errors.Count > 0)

           {

               e.NodeError = "請改正錯誤。";

           } }