數據編輯是 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;
}
…

總結