抠丁客 抠丁客
项目
编辑 (2025/12/24)

ASP.NET Core UI 的数据表列扩展

简介

数据表列扩展系统允许您在用户界面上添加新的表格列。以下示例添加了一个标题为“社保编号”的新列：

用户操作扩展点击示例

您可以使用标准列选项对表格列进行精细控制。

请注意，这是用于精细控制表格列的低层级API。如果要在表格中显示扩展属性，请参阅模块实体扩展文档。

设置方法

创建 JavaScript 文件

首先，在您的解决方案中添加一个新的 JavaScript 文件。我们将其添加到.Web项目的/Pages/Identity/Users文件夹中：

解决方案中的用户操作扩展

以下是该 JavaScript 文件的内容：

abp.ui.extensions.tableColumns
    .get('identity.user')
    .addContributor(function (columnList) {
        columnList.addTail({ // 作为最后一列添加
            title: '社保编号',
            data: 'extraProperties.SocialSecurityNumber',
            orderable: false,
            render: function (data, type, row) {
                if (row.extraProperties.SocialSecurityNumber) {
                    return '<strong>' + 
                        row.extraProperties.SocialSecurityNumber + 
                        '<strong>';
                } else {
                    return '<i class="text-muted">未定义</i>';
                }
            }
        });
    });

此示例定义了一个自定义的render函数，用于返回要在列中呈现的自定义HTML。

将文件添加到用户管理页面

接下来，您需要将此 JavaScript 文件添加到用户管理页面。您可以利用打包与压缩系统的功能。

在模块类的ConfigureServices方法中编写以下代码：

Configure<AbpBundlingOptions>(options =>
{
    options.ScriptBundles.Configure(
        typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName,
        bundleConfiguration =>
        {
            bundleConfiguration.AddFiles(
                "/Pages/Identity/Users/my-user-extensions.js"
            );
        });
});

此配置将my-user-extensions.js添加到身份模块的用户管理页面。typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName是用户管理页面中的包名称。这是所有ABP模块使用的通用约定。

呈现列

此示例假设您已使用模块实体扩展系统定义了SocialSecurityNumber额外属性。但是：

  • 您可以添加与用户现有属性相关的新列（默认情况下未添加到表格中）。示例：
abp.ui.extensions.tableColumns
    .get('identity.user')
    .addContributor(function (columnList) {
        columnList.addTail({
            title: '电话已验证？',
            data: 'phoneNumberConfirmed',
            render: function (data, type, row) {
                if (row.phoneNumberConfirmed) {
                    return '<strong style="color: green">是<strong>';
                } else {
                    return '<i class="text-muted">否</i>';
                }
            }
        });
    });
  • 您可以添加与任何实体属性无关的新自定义列，而是完全自定义的信息。示例：
abp.ui.extensions.tableColumns
    .get('identity.user')
    .addContributor(function (columnList) {
        columnList.addTail({
            title: '自定义列',
            data: {},
            orderable: false,
            render: function (data) {
                if (data.phoneNumber) {
                    return "呼叫：" + data.phoneNumber;
                } else {
                    return '';
                }
            }
        });
    });

API

本节详细解释abp.ui.extensions.tableColumns JavaScript API。

abp.ui.extensions.tableColumns.get(entityName)

此方法用于访问特定模块实体的表格列。它接受一个参数：

  • entityName：相关模块定义的实体名称。

abp.ui.extensions.tableColumns.get(entityName).columns

columns属性用于检索表格先前定义列的双向链表。所有贡献者按顺序执行以准备最终的列列表。模块通常调用此属性以在表格中显示列。但是，如果您正在构建自己的可扩展UI，也可以使用它。

abp.ui.extensions.tableColumns.get(entityName).addContributor(contributeCallback [, order])

addContributor方法覆盖所有场景，例如，您可能希望在列表的不同位置添加列、更改或删除现有列。addContributor具有以下参数：

  • contributeCallback：每当需要创建列列表时调用的回调函数。您可以在此回调方法内自由修改列列表。
  • order（可选）：回调在回调列表中的顺序。您的回调将添加到列表末尾（因此，您有机会修改先前贡献者添加的列）。您可以将其设置为0以将您的贡献者添加为第一项。

示例

var myColumnDefinition = {
    title: '自定义列',
    data: {},
    orderable: false,
    render: function(data) {
        if (data.phoneNumber) {
            return "呼叫：" + data.phoneNumber;
        } else {
            return '';
        }
    }
};

abp.ui.extensions.tableColumns
    .get('identity.user')
    .addContributor(function (columnList) {
        // 从actionList中移除一项
        columnList.dropHead();

        // 向actionList添加新项
        columnList.addHead(myColumnDefinition);
    });

columnList是一个链表。您可以使用其方法根据需要构建列列表。

在本文档中