Javascript 未调用renderCell函数？

我正在学习dgrid的基础知识，我最感兴趣的功能之一是能够在网格单元中呈现dom元素。我正在使用一个商店，这是我看过的所有例子都没有用到的东西，而且我还没有能够模仿这些例子让事情正常工作。以下是我的工作内容：

function testRenderCell(object, value, node, options) {
    var div = document.createElement("div");
    div.className = "renderedCell";
    div.innerHTML = "test";
    return div;
};

var jsonObj= 
{
    columns : [{label: "Test", field: "test", width: "150px", renderCell: testRenderCell}],
    data : []
};

grid.set("columns", jsonObj.columns);

var dataStore = new Observable(Memory({idProperty: "id", data: jsonObj.data}));
grid.store = dataStore;

在使用REST调用结果调用的函数中：

for (var i = 0; i < reply.length; i++) {
    dataStore.put({
        test: reply[i],
    },
    {id:i}
);

for（变量i=0；i

---

但是，dgrid仅将内容呈现为[object]，这显然意味着存储区中的原始数据正在单元格中呈现，而renderCell没有被调用。也许我误解了renderCell函数的调用方式/时间，或者我只是犯了一个愚蠢的错误。无论如何，任何帮助都将不胜感激！

我刚刚使用您的网格运行了整个过程，并测试了您的状态nder cell函数，只使用您的示例替换所有列，但显然选择了他们使用的json中包含的字段名。这是一个很好的处理方法。就我提到的一个例子来说，它可能会有所帮助，它不包括renderCell，但这是一个很好的起点

要在返回的div中显示数据中的一些值，我可以选择要在返回的html中显示的value参数，如下所示

function testRenderCell(object, value, node, options){
    var div = document.createElement("div");
    div.className = "renderedCell";
    div.innerHTML = value;
    return div;
}

这是我自己的索引文件中的代码片段，我使用的数据只是我复制到系统中的数据的本地版本

require([
    "dojo/request",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid"
], function (request, Memory, OnDemandGrid) {

    function testRenderCell(object, value, node, options){
        var div = document.createElement("div");
        div.className = "renderedCell";
        div.innerHTML = value;
        return div;
    }

    request("/DGridTests/data.json", {
        handleAs: "json"
    }).then(function (response) {
        // Once the response is received, build an in-memory store with the data
        var store = new Memory({ data: response });

        // Create an instance of OnDemandGrid referencing the store
        var grid = new OnDemandGrid({
            store: store,
            columns: [
                { 
                    label: "Test",
                    field: "first",
                    width: "150px",
                    renderCell: testRenderCell
                }
            ]
        }, "grid");

        grid.startup();
    });
});

可以找到网格的文档和renderCell函数的详细信息

您的[Object]呈现内容可能有几个原因，第一个可能是检查您是否也在使用“formatter”，因为这将覆盖“renderCell”

第二种方法是确保在进入renderCell函数时看到的值或字段不是对象本身，您可能需要拉出所需的变量

第三个问题是网格不喜欢注入列的方式，可能会稍微回溯，并将代码重构为更简单的语法，将列作为网格构造函数参数的一部分添加，如我的代码片段中所示。您可以在以后添加复杂性

我希望这会有所帮助，如果我想到其他任何东西，我会补充更多，祝你好运

[更新]

好的，阅读David的回答，我尝试不返回任何内容，而只是更改节点。这似乎有效，下面是更改为执行此操作的函数。我不确定是否喜欢不返回任何内容，函数正在执行的操作不太明显，但它仍然有效，这很酷

function testRenderCell(object, value, node, options){
    node.innerHTML = value;
}

---

我刚刚用你的网格运行了一遍，我测试了你的render cell函数，用你的示例替换了所有列，但显然选择了一个包含在他们使用的json中的字段名。这是一个不错的选择。拿我提到的一个例子来说，它可能会有所帮助，它不包括renderCell，但这是一个很好的起点

要在返回的div中显示数据中的一些值，我可以选择要在返回的html中显示的value参数，如下所示

function testRenderCell(object, value, node, options){
    var div = document.createElement("div");
    div.className = "renderedCell";
    div.innerHTML = value;
    return div;
}

这是我自己的索引文件中的代码片段，我使用的数据只是我复制到系统中的数据的本地版本

require([
    "dojo/request",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid"
], function (request, Memory, OnDemandGrid) {

    function testRenderCell(object, value, node, options){
        var div = document.createElement("div");
        div.className = "renderedCell";
        div.innerHTML = value;
        return div;
    }

    request("/DGridTests/data.json", {
        handleAs: "json"
    }).then(function (response) {
        // Once the response is received, build an in-memory store with the data
        var store = new Memory({ data: response });

        // Create an instance of OnDemandGrid referencing the store
        var grid = new OnDemandGrid({
            store: store,
            columns: [
                { 
                    label: "Test",
                    field: "first",
                    width: "150px",
                    renderCell: testRenderCell
                }
            ]
        }, "grid");

        grid.startup();
    });
});

可以找到网格的文档和renderCell函数的详细信息

您的[Object]呈现内容可能有几个原因，第一个可能是检查您是否也在使用“formatter”，因为这将覆盖“renderCell”

第二种方法是确保在进入renderCell函数时看到的值或字段不是对象本身，您可能需要拉出所需的变量

第三个问题是网格不喜欢注入列的方式，可能会稍微回溯，并将代码重构为更简单的语法，将列作为网格构造函数参数的一部分添加，如我的代码片段中所示。您可以在以后添加复杂性

我希望这会有所帮助，如果我想到其他任何东西，我会补充更多，祝你好运

[更新]

好的，阅读David的回答，我尝试不返回任何内容，而只是更改节点。这似乎有效，下面是更改为执行此操作的函数。我不确定是否喜欢不返回任何内容，函数正在执行的操作不太明显，但它仍然有效，这很酷

function testRenderCell(object, value, node, options){
    node.innerHTML = value;
}

---

我昨天刚开始使用dgrid。我使用了dojo.store.JsonRest，没有问题。但是，我怀疑该商店与您的问题有任何关系。我会尝试以下几种方法：

使用renderCell函数提供的DOM节点，而不是创建新的“div”（请参见下面的示例）

我不认为你不需要从renderCell函数返回任何东西。我没有，它对我有效

我猜您的问题是您正在创建一个div，而没有使用提供的div。以下是我创建dgrid的方式：

grid = new Grid({
    store: Observable(JsonRest({
        target: myUrl,
        idProperty: 'id'
    })),
    columns: {
        timestamp: {
            label: 'Date',
            renderCell: function (object, value, node, options) {
                // Object is the row; i.e., object's properties are the column names
                // value is the value for this cell 
                // node is the DOM node of this cell
                // Not sure what 'options' refers to; I didn't need a fourth param
                var dtg = new Date(value);

                node.innerHTML = locale.format(dtg, {
                     datePattern: 'MM/dd/yyyy',
                     timePattern: 'HH:mm:ss'
                });

                // Notice I didn't return anything
             }
        }
}, 'my-grid');

---

希望这能有所帮助。

我昨天刚开始使用dgrid。我使用了dojo.store.JsonRest，没有任何问题。但是，我怀疑该商店与您的问题有关。我会尝试以下几种方法：

使用renderCell函数提供的DOM节点，而不是创建新的“div”（请参见下面的示例）

我不认为你不需要从renderCell函数返回任何东西。我没有，它对我有效

我猜您的问题是您正在创建一个div，而没有使用提供的div。以下是我创建dgrid的方式：

grid = new Grid({
    store: Observable(JsonRest({
        target: myUrl,
        idProperty: 'id'
    })),
    columns: {
        timestamp: {
            label: 'Date',
            renderCell: function (object, value, node, options) {
                // Object is the row; i.e., object's properties are the column names
                // value is the value for this cell 
                // node is the DOM node of this cell
                // Not sure what 'options' refers to; I didn't need a fourth param
                var dtg = new Date(value);

                node.innerHTML = locale.format(dtg, {
                     datePattern: 'MM/dd/yyyy',
                     timePattern: 'HH:mm:ss'
                });

                // Notice I didn't return anything
             }
        }
}, 'my-grid');

---

希望这能有所帮助。

感谢您的帮助。我可以通过将列声明为网格来实现这一点，但我不知道为什么会有不同。我想，由于dgrid是一种相对较新的技术，它仍然有一些怪癖。感谢您的帮助。我可以通过声明列来实现这一点正如网格所声明的，虽然我不是苏尔