1

我正在学习 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 函数，或者我只是犯了一个愚蠢的错误。无论如何，任何帮助将不胜感激！

4

2 回答 2

3

我昨天才开始使用 dgrid。我使用了 dojo.store.JsonRest 并且没有问题。但是，我怀疑这家商店与您的问题有关。我会尝试几件事：

  1. 不要创建新的“div”，而是使用 renderCell 函数提供的 DOM 节点（参见下面的示例）
  2. 我认为您不需要从 renderCell 函数返回任何内容。我没有，它对我有用

我猜你的问题是你正在创建一个 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');

希望这可以帮助。

于 2013-06-28T02:16:37.240 回答
2

我刚刚浏览了dgrid 教程，解释了如何在网格中使用商店，并且我通过仅用您的示例替换所有列来测试您渲染单元格功能，但显然选择了他们使用的 json 中包含的字段名称。它奏效了。看一下我提到的示例，它可能会有所帮助，它不包括 renderCell，但它是一个很好的起点。

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

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();
    });
});

可以在此处找到 Grid 的文档和有关 renderCell 函数的详细信息。

您的 [Object] 渲染内容有几个可能的原因，首先可能是检查您是否还使用了“格式化程序”，因为这将覆盖“renderCell”。

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

第三个是网格不喜欢您在其列中注入的方式，可能会回溯一点并将您的代码重构为更简单的语法，将列添加为网格构造函数参数的一部分，就像我的代码片段中一样。您以后可以随时添加复杂性。

希望对你有帮助，如果我想到什么我会补充更多，祝你好运。

[更新]

好的，阅读大卫的答案，我尝试不返回任何内容，而只是更改节点。它似乎有效，这是更改为执行此操作的功能。我不确定我是否喜欢不返回任何东西，函数在做什么不太明显，但它仍然有效，所以很酷......

function testRenderCell(object, value, node, options){
    node.innerHTML = value;
}
于 2013-06-27T22:59:49.607 回答