ItemsView Class Items视图类

GoTo DevExpress Data Grid 数据网格

ItemsView Class Items视图类

使用 HTML-CSS 模板呈现项目（记录）。

Declaration 声明

public class ItemsView :
    ColumnView,
    ISupportCommandBindingForElements<string>,
    IDxHtmlDesignerDataProvider,
    IDxHtmlRepositoryOwner,
    IAccessibleGrid

Remarks 谈论

ItemsView 没有默认的数据表示形式。它使用 HTML-CSS 模板呈现项目（记录），您可以使用属性指定该模板，也可以使用事件动态指定该模板。

Specify Default Template 指定默认模板

使用 ItemsView.HtmlTemplate 属性将默认模板分配给项。为此，HtmlTemplate 对象公开了两个嵌套属性：

• HtmlTemplate.Template — 指定定义 UI 元素布局的 HTML 代码。
• HtmlTemplate.Styles — 指定应用于 UI 元素的 CSS 样式。

在设计时，您可以使用 Html 模板编辑器指定 HTML 和 CSS 代码。

Main Features of HTML and CSS templates HTML 和 CSS 模板的主要特点

Data binding 数据绑定

HTML 标记中的 ${FieldName} 语法插入控件数据源中的字段值。请参见 数据绑定。

Images 图像

HTML 标记允许您添加图像。

Buttons 按钮

HTML-CSS 标记允许您添加元素以模拟按钮。

Inplace Editors 就地编辑器

The 标记允许您将就地编辑器（存储库项目）嵌入到项目中，以显示和编辑数据源字段。

<input name="repositoryItemButtonEdit1" value="${Price}" class="editor"/>

确保启用 ColumnViewOptionsBehavior.Editable 选项，以便在鼠标单击时激活就地编辑器。

Mouse actions 鼠标操作

• 项目视图包含用于响应 HTML 元素上的鼠标操作的事件：ItemsView.ElementMouseClick、ItemsView.ElementMouseDown 和 ItemsView.ElementMouseUp。
• 还可以订阅 HTML 标记中元素的鼠标事件，以及在使用 Fluent API 时订阅的鼠标事件。

有关详细信息，请参阅以下主题：基于 HTML-CSS 的桌面 UI。

Specify Different Templates for Different Items 为不同的项目指定不同的模板

处理 ItemsView.QueryItemTemplate 事件以将自定义模板分配给各个项。此事件针对每个项重复触发。

以下 ItemsView.QueryItemTemplate 事件处理程序根据项的类型（IsOwnMessage 设置）将不同的模板分配给不同的项。

您可以在以下演示中找到此示例的完整代码：聊天客户端。

void OnQueryItemTemplate(object sender, QueryItemTemplateEventArgs e) {
    var message = e.Row as DevAV.Chat.Model.Message;
    if(message == null)
        return;
    if(message.IsOwnMessage)
        Styles.MyMessage.Apply(e.Template);
    else
        Styles.Message.Apply(e.Template);
    //...
}

Customize Items Dynamically 动态自定义项目

当特定项即将在屏幕上显示时，项视图将引发 ItemsView.CustomizeItem 事件。您可以处理此事件以动态自定义项目的 HTML 元素的样式和可见性。

使用事件的 Element 属性可访问当前已处理项的 HTML 元素。以下方法允许您按标记、类和 ID 检索 HTML 元素：

• Element.FindElementsByTag — 返回具有指定标签的 HTML 元素的列表。
• Element.FindElementsByClass — 返回属于指定类的 HTML 元素的列表。
• Element.FindElementById — 返回具有指定 ID 的 HTML 元素。

这些方法返回的元素公开属性以更改元素显示设置。主要特性包括：

• 元素。隐藏 — 允许您隐藏（折叠）元素。
• 元素。Disabled （已禁用） - 允许您禁用元素。
• 元素。Style — 允许您修改应用于元素的 CSS 样式属性。此对象为此目的公开了 SetBackgroundColor、SetForeColor、SetVisibility（显示空区域而不是元素）和 SetProperty 方法。

以下示例根据自定义逻辑更改 HTML 元素的可见性。

您可以在以下演示中找到此示例的完整代码：聊天客户端。

//CustomizeItem event handler:
void OnCustomizeItem(object sender, CustomizeItemArgs e) {
    //...
    if(message.IsLiked) {
        var btnLike = e.Element.FindElementById("btnLike");
        var btnMore = e.Element.FindElementById("btnMore");
        if(btnLike != null && btnMore != null) {
            btnLike.Hidden = false;
            btnMore.Hidden = true;
        }
    }
    if(message.IsFirstMessageOfBlock)
        return;
    if(!message.IsOwnMessage) {
        var avatar = e.Element.FindElementById("avatar");
        if(avatar != null)
            //Display an empty region instead of the 'avatar' element.
            avatar.Style.SetVisibility(Utils.Html.Internal.CssVisibility.Hidden);
    }
//...
}