使用 Dojo CDN 的 dgrid/Grid答案

【问题标题】：Use dgrid/Grid by Dojo CDN使用 Dojo CDN 的 dgrid/Grid
【发布时间】：2014-07-21 19:37:38
【问题描述】：

我尝试通过 CDN 包含的 dojo 1.10 使用 dgrid，但它不起作用。

<script
src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad:true"></script>
<script>
require([ "dgrid/Grid", "dojo/domReady!" ], function(Grid) {
    var grid = new Grid({
        columns : {
            serverName : "Server Name",
            serviceName : "Service Name",
            available : "Verfügbar"
        }

    }, "grid");
});

问题出在哪里？通过加载站点，我得到一个 Err：scriptErr。

【问题讨论】：

在require 调用之后是否有结束</script> 标记？ Grid 构造函数的第二个参数是要附加到的元素的 id，因此，正如@frank 指出的那样，您的 HTML 中也需要一个 id 为“grid”的元素。

标签： dojo dgrid

【解决方案1】：

这是一个非常完整的示例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello dgrid!</title>
    <script 
        src='//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js' 
        data-dojo-config="async: true, parseOnLoad: true">
    </script>

    <script>
        require({
            packages: [{
                name: 'dgrid',
                location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.15'
            }, {
                name: 'xstyle',
                location:'//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
            }, {
                name: 'put-selector',
                location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
            }]
            },[
                'dgrid/Grid',
                'dojo/domReady!'
            ], function (Grid) {

            var data = [
                { first: 'Bob', last: 'Barker', age: 89 },
                { first: 'Vanna', last: 'White', age: 55 },
                { first: 'Pat', last: 'Sajak', age: 65 }
            ];

            var grid = new Grid({
                columns: {
                    first: 'First Name',
                    last: 'Last Name',
                    age: 'Age'
                }
            }, 'grid');

            grid.renderArray(data);
        });
    </script>
</head>
<body>
    <div id="grid"></div>
</body>
</html>

【讨论】：

【解决方案2】：

dgrid 及其依赖项不托管在 Google CDN 上，更不用说作为 Dojo 的兄弟姐妹了，而且您似乎没有任何 packages 配置来在其他地方获取 dgrid、xstyle 和 put-selector。

虽然 dgrid 没有发布到任何 CDN，RawGit 现在有一个他们正在测试的功能，它能够在 MaxCDN 上缓存 github 资源。您可以通过如下配置将其用于 dgrid：

var dojoConfig = {
    async: true,
    packages: [{
        name: 'dgrid',
        location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.15'
    }, {
        name: 'xstyle',
        location:'//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
    }, {
        name: 'put-selector',
        location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
    }]
};

当然，请记住，RawGit 的 CDN 服务不能保证 100% 的正常运行时间，因此只能用于原型设计，而不是生产，但理想情况下，无论如何您都应该为生产滚动自定义构建。

【讨论】：

哦，谢谢 :) 这个解决方案的问题是我需要 dgrid 进行生产。是否可以通过 google cdn 加载 dojo 库并通过 dojoConfig 添加本地 dgrid 包？
是的，这也是可能的。 DTK 对此有一个教程：dojotoolkit.org/documentation/tutorials/1.10/cdn

【解决方案3】：

你需要在body里面放一个div标签。

<body>
    <div id="grid"></div>
</body>

【讨论】：

【解决方案4】：

你试过调用 grid.renderArray(data) 吗？

这是一个完整的例子

要求（[“dgrid/网格”，“dojo/domReady！”]，函数（网格）{ 变量数据 = [ {第一个：“鲍勃”，最后一个：“巴克”，年龄：89 }， { first: "Vanna", last: "White", age: 55 }, { 第一个：“Pat”，最后一个：“Sajak”，年龄：65 } ]; var 网格 = 新网格（{ 列： { 第一个：“名字”，最后：“姓氏”，年龄：“年龄” } }， “网格”）; grid.renderArray(数据); });

更多示例here

【讨论】：