DevExpress控件使用系列--ASPxTreeList DevExpress控件使用系列--ASPxTreeList

控件功能结合列表控件及树控件的优点，在列表控件中实现类型树的多层级操作
官方说明 http://documentation.devexpress.com/#AspNet/clsDevExpressWebASPxTreeListASPxTreeListtopic
使用说明

绑定的数据源需具备当前节点编号、父级节点编号等字段
通过设置属性下列属性控件自动实现层级关系，初始化只显示第一层，可通过+/-图标展开/收缩层级关系
KeyFieldName="Id" ParentFieldName="ParentId"

代码示例

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属性：当点击删除链接时，控件会自动判断是否有子节点，如有则给与提示并不触发删除事件
aspx.cs后台代码设置

绑定数据
this.treeList.DataSource =数据源

this.treeList.DataBind()
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;

            }

        }

    }
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;

            }

        }

    }
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());

            }

        }

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

        } }

控件功能结合列表控件及树控件的优点，在列表控件中实现类型树的多层级操作
官方说明 http://documentation.devexpress.com/#AspNet/clsDevExpressWebASPxTreeListASPxTreeListtopic
使用说明

绑定的数据源需具备当前节点编号、父级节点编号等字段
通过设置属性下列属性控件自动实现层级关系，初始化只显示第一层，可通过+/-图标展开/收缩层级关系
KeyFieldName="Id" ParentFieldName="ParentId"

代码示例

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属性：当点击删除链接时，控件会自动判断是否有子节点，如有则给与提示并不触发删除事件
aspx.cs后台代码设置

绑定数据
this.treeList.DataSource =数据源

this.treeList.DataBind()
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;

            }

        }

    }
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;

            }

        }

    }
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());

            }

        }

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

        } }

DevExpress控件使用系列--ASPxTreeList DevExpress控件使用系列--ASPxTreeList

相关推荐