代码之家 › 专栏 › 技术社区 › user3808286

Dojo CDN使用dgrid/Grid

dgrid dojo

0

user3808286 · 技术社区 · 10 年前

我尝试通过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。

4 回复 | 直到 10 年前

1

2

NilsB 9 年前

这是一个 真正完整的 实例

<!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

1

Ken Franqueiro 10 年前

dgrid及其依赖项不托管在GoogleCDN上,更不用说作为Dojo的兄弟,而且您似乎没有 packages 配置以获取dgrid、xstyle并将选择器放在其他位置。

虽然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%的正常运行时间,因此只能用于原型制作,而不能用于生产,但无论如何,您都应该为生产运行自定义构建。

3

0

frank 10 年前

您需要在正文中放置一个div标记。

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

4

0

DGM 10 年前

您是否尝试过调用grid.renderArray(data)?

下面是一个完整的示例

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

更多示例 here