Question

我正在研究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}
);

但是，dgrid只是将内容呈现为[object Object]，这显然意味着存储中的原始数据正在单元格中呈现，并且不会调用renderCell。也许我误解了如何/何时调用renderCell函数，或者我只是犯了一个愚蠢的错误。在任何情况下，任何帮助将不胜感激！

Answer 1

我昨天刚开始与dgrid合作。我使用了dojo.store.JsonRest并且没有问题。但是，我怀疑商店与你的问题有什么关系。我会尝试一些事情：

不使用创建新的'div'，而是使用renderCell函数提供的DOM节点（请参阅下面的示例）
我认为您不需要从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');

希望这有帮助。

Answer 2

我刚刚使用你的网格运行dgrid tutorial explaining how to use stores，我测试了你通过用你的例子替换所有列来渲染单元格函数，但显然选择了他们使用的json中包含的字段名称。这是一种享受。拿一个我提到的look at the example，它可能有帮助，它不包括renderCell，但它是一个很好的起点。

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

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

以下是我自己的索引文件中的代码段，我使用的数据只是我复制到系统中的used in the example数据的本地版本。

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函数的详细信息here。

您的[Object]渲染内容有几个可能的原因，第一个可能是检查您是否也使用'formatter'，因为它会覆盖'renderCell'。

第二个是确保在进入renderCell函数时看到的值或字段不是Object本身，您可能需要提取所需的变量。

第三种是网格不喜欢你在其列中注入的方式，可能会稍微跟踪一下并将你的代码重构为更简单的语法，将列添加为我的代码片段中的网格构造函数参数的一部分。您可以随时添加复杂性。

我希望有所帮助，如果我想到其他任何事情，我会添加更多，祝你好运。

[UPDATE]

好的阅读David的回答，我尝试不返回任何内容而只改变节点。它似乎工作，这里的功能改变了这样做。我不确定我是否喜欢不返回任何东西，这个函数的作用有点不太明显，但它仍然有效，所以很酷......

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

renderCell函数没被调用？

2 个答案: