世界俱乐部杯赛

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

   DHTMLX 试用下载

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

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

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

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：创建数据视图编辑器

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 附加到弹出窗口

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

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：选择后更新网格单元格

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：为数据视图编辑器添加自定义样式以优化用户体验

…

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

总结