dojo中的grid表格问题

AndroidStudy2018 2019-01-11 10:42:41

想实现dojo里的表格，用grid实现，数据暂时写死了，可是表格愣是出不来。
哪位给看看，哪里有问题？
dojo的路径引入没问题，用的1.14.2最新版本



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>

        #userGrid {

            height: 500px;

        }

    </style>

    <script type="text/javascript"> dojoConfig = {async: true, parseOnLoad: false}</script>

    <script type="text/javascript" src="../dojo-release-1.14.2/dojo/dojo.js"></script>



    <script>

        require(["dojo/_base/lang",

                 "dojox/grid/DataGrid",

                 "dojo/data/ItemFileWriteStore",

                 "dojo/dom",

                 "dojo/domReady!"

            ],

            function (lang, DataGrid, ItemFileWriteStore, dom) {

                var data = {

                    identifier: "id",

                    items: [

                        {id: "1", name: "张三", age: 23, sex: "男"},

                        {id: "2", name: "李娜", age: 18, sex: "女"},

                        {id: "3", name: "李婷", age: 27, sex: "女"},

                        {id: "4", name: "李逵", age: 30, sex: "男"}

                    ]

                };

                var store = new ItemFileWriteStore({data: data});

                var layout = [[

                    {'name': '学号', 'field': 'id', 'width': '100px' },

                    {'name': '姓名', 'field': 'name', 'width': '100px' },

                    {'name': '年龄', 'field': 'age', 'width': '100px' },

                    {'name': '性别', 'field': 'sex', 'width': '100px' },

                ]];



                var grid = new DataGrid({

                    id: 'grid',

                    store: store,

                    structure: layout,

                    rowSelector: '20px'

                });



                grid.placeAt("userGrid");

                grid.startup();

            });



    </script>



<body class="tundra">

<div class="heading">表格</div>

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

</body>

</html>

...全文

181 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

AndroidStudy2018 2019-01-12

打赏
举报

引用 8 楼讨厌走开啦的回复:

没报错的话看下元素是否生成，如果没生成，说明new DataGrid的时候有参数少了或者传的不对如果生成了看下是不是因为样式问题导致没显示出来。

我把引入的css删掉，也就是这句 <style> @import url("../dojo-release-1.14.2/dojox/grid/resources/claroGrid.css"); </style> 数据显示出来了，不过就是格式乱掉了，表头位置和数据重叠在一起了，这很坑啊，新手确实难搞，我这代码还是拷贝书上的例子，竟然也出错

讨厌走开啦 2019-01-11

打赏
举报

没报错的话看下元素是否生成，如果没生成，说明new DataGrid的时候有参数少了或者传的不对如果生成了看下是不是因为样式问题导致没显示出来。

AndroidStudy2018 2019-01-11

打赏
举报

引用 5 楼讨厌走开啦的回复:

require的资源少了 dojox/grid/DataGrid 这个你本地没有吧

这个有啊，不过图标跟其它的有点不一样

AndroidStudy2018 2019-01-11

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        @import url("../dojo-release-1.14.2/dojox/grid/resources/claroGrid.css");

    </style>
    <script type="text/javascript"> dojoConfig = {async: true, parseOnLoad: false}</script>
    <script type="text/javascript" src="../dojo-release-1.14.2/dojo/dojo.js"></script>

    <script>
        require(["dojo/_base/lang",
                 "dojox/grid/DataGrid",
                 "dojo/data/ItemFileWriteStore",
                 "dojo/dom",
                 "dojo/domReady!"
            ],
            function (lang, DataGrid, ItemFileWriteStore, dom) {
                var data = {
                    identifier: "id",
                    items: [
                        {id: "1", name: "张三", age: 23, sex: "男"},
                        {id: "2", name: "李娜", age: 18, sex: "女"},
                        {id: "3", name: "李婷", age: 27, sex: "女"},
                        {id: "4", name: "李逵", age: 30, sex: "男"}
                    ]
                };
                var store = new ItemFileWriteStore({data: data});
                var layout = [[
                    {'name': '学号', 'field': 'id', 'width': '100px' },
                    {'name': '姓名', 'field': 'name', 'width': '100px' },
                    {'name': '年龄', 'field': 'age', 'width': '100px' },
                    {'name': '性别', 'field': 'sex', 'width': '100px' }
                ]];

                var grid = new DataGrid({
                    id: 'grid',
                    store: store,
                    structure: layout,
                    rowSelector: '20px'
                });

                grid.placeAt("userGrid");
                grid.startup();
            });
    </script>

<body class="tundra">
<div class="heading">表格</div>
<div id="userGrid"></div>
</body>
</html>

我删掉了style那一段，然后表格div的id名称改成userGrid 这样控制台不报错，但是页面还是没有显示grid表格样式和数据

讨厌走开啦 2019-01-11

打赏
举报

require的资源少了 dojox/grid/DataGrid 这个你本地没有吧

AndroidStudy2018 2019-01-11

打赏
举报

引用 3 楼讨厌走开啦的回复:

[quote=引用 2 楼 AndroidStudy2018 的回复:] [quote=引用 1 楼讨厌走开啦的回复:] 错误贴出来啊，我们没有你的完整工程。

我不知道哪里出错啊，我就建了一个 test.html页面，页面里的代码就是上面这些然后在IIS服务器运行（浏览器输入 http://localhost/test.html）这个grid就是显示不出来， html body里的 “表格”两个字倒是显示出来了，但是grid这个真正的表格没有显示，更不要说表格内的数据了。[/quote] 囧浏览器控制台肯定报错了啊，把那个错误信息贴出来。呃，如果就这么一个页面，那错误应该就是js里require的那些资源少了。[/quote] 大神，你说查控制台我才知道，汗，刚接触。这是我查的结果： Uncaught TypeError: Cannot read property 'appendChild' of null at Object.place (dojo.js:8) at Object.placeAt (DataGrid.js:2) at GridTable.html:46 at _ce (dojo.js:8) at _37 (dojo.js:8) at dojo.js:8 at _38 (dojo.js:8) at _81 (dojo.js:8) at _f6 (dojo.js:8) at HTMLScriptElement._10b (dojo.js:8) 就是这两行代码有问题吧， userGrid没调用成功？ grid.placeAt("userGrid"); grid.startup(); 这个userGrid跟第5行开始的 <style> #userGrid { height: 500px; } </style> 不是同一个？

讨厌走开啦 2019-01-11