如何在使用 DHTMLX 的 JavaScript 网格表格中创建自定义 DataView 编辑器-控件新闻-慧都网

如何在使用 DHTMLX 的 JavaScript 网格表格中创建自定义 DataView 编辑器

翻译|行业资讯|编辑：张蓉|2025-05-30 13:37:12.763|阅读 72 次

概述：数据编辑是 DHTMLX Grid 组件所具备的众多强大功能之一。将其与 Grid 的其他优势（如高度可定制性以及与 Suite 组件的互操作性）相结合，您可以添加自定义编辑选项来满足特定用例场景的需求。在本文中，您将了解如何通过数据视图编辑器来丰富 Grid 的配置。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

带自定义数据视图编辑器的 JavaScript 网格表格示例

DHTMLX Grid 附带了一系列内置列编辑器，这使得在 Web 应用的数据表格中添加各种编辑形式变得更加容易。但如果您正在开发一个仪表板或内容管理系统（CMS），需要比基本输入框或下拉列表编辑器更具信息性和视觉吸引力的组件，该怎么办？此时，如下方示例中的数据视图编辑器就派上用场了。

点击 “Owner” 列中的任何单元格，都会弹出一个卡片式列表的编辑器，其中显示了所有可用选项。您可以直观地浏览并选择合适的选项，所选单元格的内容也会随之更新。

在 DHTMLX Grid 中添加自定义数据视图编辑器的分步指南

接下来，我们将介绍如何在使用 DHTMLX 的 JavaScript 网格表格中集成自定义数据视图编辑器。使用我们的 Grid 组件时，您无需引入第三方数据视图组件，也不必从头开始构建。相反，您可以使用 Suite 库中相应的 JavaScript DataView 和 Popup 组件，它们可以与 Grid 无缝集成，为您节省大量时间和精力。不过，我们仍需阐明一些关键点，以使这种集成更加高效和简便。

步骤 1：初始化和配置网格表格

首先，初始化一个 JavaScript 数据表格并指定其结构和行为。columns 配置属性定义了每列的 id、类型、格式和编辑选项，包括后续将补充基于 DataView 编辑器的 “Owner” 列。
为此，您需要使用mark属性为 “Owner” 列的单元格分配一个特殊的 CSS 类（dataview-editor），以触发自定义编辑器。同时，应设置editable: false以防止该列使用默认编辑方式。

const grid = new dhx.Grid("grid", {
    columns: [
        { id: "project", header: [{ text: "Project" }], width: 180 },
        {
            id: "owner",
            header: [{ text: "Owner" }],
            mark: () => "dataview-editor",
            editable: false,
            autoWidth: true
        },
            … // Config for other columns
    ],
    selection: true,
    editable: true,
    keyNavigation: false,
    data,
});

在这一步中，您还需要定义网格的默认行为 —— 启用编辑、选择功能，禁用键盘导航，并加载初始数据。

步骤 2：创建数据视图编辑器

接下来，初始化 DHTMLX DataView，并为 “Owner” 列中用户编辑时显示的单元格提供自定义 HTML 布局。此布局通过template属性定义，包含视觉丰富的卡片格式，用于显示人员的照片、姓名、职位、电话号码、生日和电子邮件。

const dataview = new dhx.DataView(null, {
    selection: true,
    itemsInRow: 2,
    template: ({ name, photo, post, phone, birthday, mail }) => (`
    ... // Custom HTML layout for cards appearing in the editor
`),

    `),
    data: owner_data,
});

这通过提供结构化且直观的视觉效果改善了编辑体验。本教程的最后一步将详细介绍此布局的样式设置。

步骤 3：将 DataView 附加到弹出窗口

现在，您需要使用 Suite 库中的 JavaScript Popup 组件创建一个弹出窗口：

const popup = new dhx.Popup({
    css: "dhx_widget--border-shadow popup",
});
popup.attach(dataview);

通过popup.attach(dataview)将先前创建的 DataView 布局插入到弹出窗口中。弹出窗口仅在需要时（即用户点击 “Owner” 列的任意单元格时）显示编辑器的丰富用户界面。通过css: "dhx_widget–border-shadow popup"添加额外样式，使弹出窗口在视觉上更具辨识度，并与其他 UI 元素匹配。

为了在用户点击 “Owner” 单元格时显示弹出窗口，需通过列的 HTML 模板应用的dataview-editor类，为 “Owner” 列的单元格附加事件处理程序。

eventHandlers: {
    onclick: {
        "dataview-editor": (event, { row, col }) => {
            const ownrer = dataview.data.find(item => item.name == row[col.id]);
            dataview.selection.add(ownrer.id);// Highlights the selected card in the DataView
            popup.show(event.target, { centering: false });// Opens the popup near the clicked element
       }
    }
},

步骤 4：选择后更新网格单元格

当在数据视图编辑器中选中某个项目时，需要使用afterSelect事件更新网格单元格并隐藏弹出窗口：

dataview.events.on("AfterSelect", () => {
    const owner = dataview.selection.getItem();
    const { row } = grid.selection.getCell();
    grid.data.update(row.id, { "owner": owner.name });
    popup.hide();
});

这一步使自定义编辑器按预期运行 —— 用户点击单元格、选择卡片，网格会实时更新内容。

步骤 5：为数据视图编辑器添加自定义样式以优化用户体验

自定义数据视图编辑器功能完善后，可进一步提升其视觉吸引力。使用 DHTMLX 组件时，可对数据视图项应用以下预定义 CSS 布局模板之一：

…

.dhx_dataview_template_d__picture {
        width: 110px;
        min-width: 110px;
        background: center center/cover no-repeat #f7f7f7;
}


.dhx_dataview_template_d__picture:before {
        content: "";
        display: block;
        padding-top: 100%;
}


.dhx_dataview_template_d__body {
        padding-left: 12px;
        width: 150px;
}
…

这些样式用于在初始化dhx.DataView时，对步骤 2 中提供的 DataView 项模板进行结构和样式设置。
按照上述步骤操作，您即可如我们的示例所示，创建一个带有自定义数据视图编辑器的 JavaScript 数据表格。

总结

本教程生动展示了自定义 DHTMLX Grid 的众多方式之一。其丰富的 API 使您能够突破默认设置的限制，为 Grid 扩展新的功能和设计模式。该组件提供了对 UI 和数据行为的高度控制权。无论您是在构建普通的仪表板还是复杂的企业级应用，DHTMLX Grid 都是实现您 Web 开发目标的可靠工具。
慧都是⼀家⾏业数字化解决⽅案公司，专注于软件、⽯油与⼯业领域，以深⼊的业务理解和⾏业经验，帮助企业实现智能化转型与持续竞争优势。
慧都科技是DHTMLX在中国的官方授权代理商，提供DHTMLX系列产品免费试用，咨询，正版销售等于一体的专业化服务。DHTMLX专注于JavaScript和HTML5 UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和移动设备定制的优秀Web应用程序框架。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

上一篇：除了提效，Docker商业版还能帮助企业解决哪些问题？下一篇：Webix 复杂组件的演进——JavaScript 文件管理器