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 = "请改正错误。";

           } }