如何自定义 dgrid 中特定行的单元格

How do I customize the cells of a specific row in a dgrid?

本文关键字:单元格 自定义 dgrid      更新时间:2023-09-26

我想做一个看起来像这样的网格:具有自定义标题单元格的网格

我通过在网格的列定义中定义一个 renderHeaderCell: 函数来实现上面的图片。

        // Customize header cells
        this._columns.slice(1).forEach(
            function(column){
                column.renderHeaderCell = function(headerCellNode) {
                    // Add class to header cell
                    headerCellNode.classList.add("simbio-datasheet-header");
                    // Create header labels
                    var headerLabelDiv = document.createElement("div");
                    var headerTextNode = document.createTextNode(
                            "label" in column ? column.label : column.field);
                    headerLabelDiv.appendChild(headerTextNode);
                    // Create header comboboxes
                    var comboBoxNode = put("div.combobox"),
                        us_states = ["CA", "MA", "OH", "FL"],
                        us_cities = ["Los Angeles", "Boston", "Columbus", "Miami"];
                    var combobox1 = new SimBiologyComboBox({values: us_states});
                    var combobox2 = new SimBiologyComboBox({values: us_cities});
                    combobox1.placeAt(comboBoxNode);
                    combobox2.placeAt(comboBoxNode);
                    combobox1.startup();
                    combobox2.startup();
                    // Append everything to headerCellNode
                    headerCellNode.appendChild(headerLabelDiv);
                    headerCellNode.appendChild(comboBoxNode);
                }
            });

在此上下文中,列定义为:

this._columns = [
            {
                field      : "Count",
                label      : "",
                width      : 25,
                resizable  : false
            },
            {
                field      : "A",
                label      : "A",
                width      : 75
            },
            {
                field      : "B",
                label      : "B",
                width      : 75,
                sortable   : false
            }]

但是,我通过修改标题单元格来实现这一点

有没有办法修改非标题单元格(默认单元格)并获得相同的效果?

我不想将特定列下的所有单元格修改为如下所示。只有一行的单元格。

(我尝试将编辑器混入我的网格中。但是这种方法修改了给定列的所有单元格......我不知道如何修改给定行的单元格)

你必须创建一个mixin类(作为所有dgrid功能)并覆盖renderRow或renderCell,或者你确实传递了一个格式化程序函数,它可以为你喜欢的所有列返回标记。

dgrid/dTuned中有一个演示,展示了如何自定义渲染。