1、今天研究了dojo datagrid加载WebService后台传上来的数据。研究来研究去发现他不是很难。用谷歌多调试一下就好了。

2、看很多例子，这个例子能够更好的帮我解决问题：https://dojotoolkit.org/documentation/tutorials/1.10/dojo_data/index.html

往下滑动页面会看到类似于下面例子的截图：

3、框架都好说，把字段对应上问题不大，主要是数据。我开始是直接将WebService传出来的JSON数据传入给Memory的data,导致各种错误。   后来看了上面这个例子之后，然后用谷歌调试，发现了问题的解决办法，原来Memory中的data是一个array数组对象，而我传给它的只是json字符串，所以导致各种报错，如下图所示：

4、这样我只要把我的JSON数据反序列话成Array数组对象问题就解决啦，我的完整代码如下：

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Demo: Store Adapter</title>

    <link rel="stylesheet" href="style.css" media="screen">

    <link rel="stylesheet" href="http://localhost/dojoroot/dojox/grid/resources/claroGrid.css" media="screen">

    <style>

        #grid {

            width:100%;

        }

    </style>

</head>

<body class="claro">

<h1>Demo: Store Adapter</h1>

<div id="grid">

</div>

<!-- load dojo -->

<script src="http://localhost/dojoroot/dojo/dojo.js"></script>

<script type="text/javascript" src="http://localhost/dojoroot/jquery-3.1.0.js"></script>

<script>

//好友信息

      $.ajax({

       type:"post",

       contentType:"application/json;charset=UTF-8",

       url:"http://localhost/StuManager/StuManWService.asmx/GetStuAllInfo",

       dataType:"json",

       success:function(result)

       {

            //showinfo(result.d)

            var persons = eval("("+result.d+")"); //将WebService传过来的JSON数据反序列化成Array数组。

            showinfo(persons);

       }

       });

      function showinfo(ss)

      {

    var data, grid;

    require([

        "dojo/store/Memory",

        "dojo/data/ObjectStore",

        "dojox/grid/DataGrid",

        "dojo/domReady!"

    ], function(Memory, ObjectStore, DataGrid){

        var objectStore = new Memory({

            data:ss

        });

        grid = new DataGrid({

            store: ObjectStore({objectStore: objectStore}),

            structure: [

                { name: "学号", field: "学号", width: "5%" },

                { name: "姓名", field: "姓名", width: "5%" },

                { name: "密码", field: "密码", width: "5%" },

                { name: "性别", field: "性别", width: "5%" },

                { name: "星座", field: "星座", width: "5%" },

                { name: "年龄", field: "年龄", width: "5%" },

                { name: "班级", field: "班级", width: "5%" },

                { name: "所在班级年份", field: "所在班级年份", width: "5%" },

                { name: "生日", field: "出生日期", width: "5%" },

                { name: "电话号码", field: "电话号码", width: "5%" },

                { name: "家庭住址", field: "家庭住址", width: "5%" },

                { name: "QQ号码", field: "QQ号码", width: "5%" },

                { name: "备注", field: "备注", width: "5%" }

        ]

        }, "grid");

        grid.startup();

    });

    };

</script>

</body>

</html>

PS1:说一下DataGrid显示乱码的问题,如下图：

解决办法：因为我的js文件和html文件是分开的，把js文件用记事本打开，然后另存为UTF-8格式的文件显示就正常了,如下图所示：

PS2:如果字段名和数组中的列名没有对应上，该列就会显示很多冒号，如下图所示：

3、加载JSON文件

JSON文件如下：

{

    "items": [

        {

            "bats": "R",

            "weight": 180.0

        },

        {

            "bats": "R",

            "weight": 165.0

        }

    ]

}

JS代码如下：

<script src="../dojoroot/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>

<script>

    require([

        "dojox/grid/DataGrid",

        "dojo/store/Memory",

        "dojo/data/ObjectStore",

        "dojo/request",

        "dojo/domReady!"

    ], function(DataGrid, Memory, ObjectStore, request){

        var grid, dataStore;

        request.get("data/config.json", {

            handleAs: "json"

        }).then(function(data){

            dataStore =  new ObjectStore({ objectStore:new Memory({ data: data.items }) });

        });

    });

</script>

dojo 加载Json数据的更多相关文章

  1. hive加载json数据解决方案

    hive官方并不支持json格式的数据加载,默认支持csv格式文件加载,如何在不依赖外部jar包的情况下实现json数据格式解析,本编博客着重介绍此问题解决方案 首先创建元数据表: create EX ...

  2. 扩展JQUERY 表单加载JSON数据

    $.fn.extend({ //表单加载json对象数据 setForm : function (jsonValue) { var obj = this; $.each(jsonValue, func ...

  3. PHP+MySQL+Easyui tree菜单从后台加载json数据(一)

    实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 原理:(首先看一下参考手册的内容) 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个 ...

  4. 【Android】Handler的应用（一）：从服务器端加载JSON数据

    最终目的 以JSON的形式,将数据存入服务器端. 在Android中,以Handler加载显示大批量文字. 在此以加载金庸小说<天龙八部(新修版)>为例(2580480 字节). 以tom ...

  5. JQuery和原生JS跨域加载JSON数据或HTML。

    前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $. ...

  6. BootStrap的表格加载json数据，并且可以搜索，选择

    2018.4.11日更新,8号的时候我推荐去官网下载,但是那个版本不知道为什么我无法使用 $table.bootstrapTable('getSelections'); 无论如何...然后我尝试着更换 ...

  7. EasyUI datagrid动态加载json数据

    最近做一个项目,要求是两张张表可能查找出10多种不同的结果集. 如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载 ...

  8. vue通过ajax加载json数据

    HTML <ul id="Hanapp"> <li class="styVue" v-for="item in actList&qu ...

  9. MVC4中EasyUI Tree异步加载JSON数据生成树

      1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...

随机推荐

  1. Keepalived 双机热备

    使用 Keepalived 做双机热备非常简单,经常和 LVS 搭配来实现高可用负载平衡方案. 1. Master / Slave 首先准备两台测试服务器和一个虚拟IP. Server A: 192. ...

  2. php-fpm 老是warning 进程退出问题

    http://yangjunwei.com/a/723.html 分析Centos系统下LNMP频繁502 Bad Gateway问题 2012-01-28 杨俊伟 )     最近VPS总是出现 N ...

  3. WeX5学习笔记-建立项目且从SVN获取版本

    UI2项目(app项目)建立步骤: 1.从网上获得WeX5_V3.1.1.zip 文件,在某盘根目录下,创建一个文件,起名尽量短小,因开发包里的文件目录层次很深,有时会报路径长度超出范围的提示,如创建 ...

  4. 微分方程——基本概念和常微分方程的发展史

    1.2 基本概念和常微分方程的发展史 自变量.未知函数均为实值的微分方程称为实值微分方程:未知函数取复值或变量及未知函数均取复值时称为复值微分方程.若无特别声明,以下均指实变量的实值微分方程. 1.2 ...

  5. 关于 try catch catch

    catch 和 finally 一起使用的常见方式是:在 try 块中获取并使用资源,在 catch 块中处理异常情况,并在 finally 块中释放资源. public class abc { st ...

  6. 【总结】我所整理的各种CSS居中

    在网上看了很多文章,自己也总结了一下,虽说是自己写的,但是还是要列出我参考过的那些文章的地址,感谢你们的分享!  http://blog.gejiawen.com/2015/03/13/css-lay ...

  7. [Linux] LVM的条带化

    一.什么是条带化 当多个进程同时访问一个磁盘时,可能会出现磁盘冲突.磁盘系统对访问次数(每秒的IO操作,IOPS)和数据传输速率(读写速率,TPS)有限制. 当达到这些限制时,后面需要访问磁盘的进程就 ...

  8. java gui 下拉框中项删除按钮

    http://www.cnblogs.com/kangls/archive/2013/03/21/2972943.html http://m.blog.csdn.net/blog/ycb1689/74 ...

  9. php数据库访问

    从$res获取行数据的时候,处理mysql_fetch_row($res),还有三个方法,分别是 mysql_fetch_row($res); 返回一个所以的数组,速度较快. mysql_fetch_ ...

  10. Vmware web client 5.5 控制台连接不上：Connection timed out

    因XP下安装vsphere client5.5后,无法连接远程vsphere.因此使用vsphere web client. 但是用vsphere web client打开控制台,报错:Conneti ...