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