Question

我想制作一个如下所示的网格： Dgrid with custom header cells

我通过在网格列定义中定义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
            }]

但是，我通过修改headerCells

来实现这一目标

有没有办法可以修改非标题单元格（defaultCell）并获得相同的效果？

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

（我已经尝试在编辑器中混合mixin到我的网格中。但是这种方法修改了给定列的所有单元格......我无法弄清楚如何修改给定行的单元格）

Answer 1

你必须create a mixin类（作为所有dgrid功能）并覆盖renderRow或renderCell，或者你传递一个格式化函数，它可以为你喜欢的所有列返回所有列的标记。

dgrid / dTuned中有一个demo，它显示了如何自定义渲染。

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

1 个答案: