在MVC中动态读取JSON数据创建表格

//使用getJSON 

// ("@Url.Action("GetAllUsers","User")" ,json文件的路径.也可以是 /Member/User/GetAllUsers或者是GetAllUsers.json

$.getJSON("@Url.Action("GetAllUsers","User")", function (json) {

//初始化表格(可以是其它内容)
        var htmls = ['<table class="table">'];

//向表格添加标题行开始(横向)
        htmls.push('<tr>');

//遍历Json中k部分(json表示格式 k:v  ,如 UserName:admin)
        for (var title in json[0]) htmls.push('<td>' + title + '</td>');

//向表格添加标题行结束
        htmls.push('</tr><tbody>');

//循环读取Json数据,获取 V 部分 
        for (var i = 0; i < json.length; i++) {

//添加行开始
            htmls.push('<tr>');

//遍历每一个Json数据组,获取其中每一个value部分并添加.
            for (var v in json[i]) htmls.push('<td>' + json[i][v] + '</td>');

//添加行结束
            htmls.push('</tr>');
        }

//添加结束标记
        htmls.push('</tbody></table>');

//添加整个表格
        $('#userTable').html(htmls.join(''));
    });

//要添加表格的位置

<div id="userTable"></div>

 

 

JSON数据格式

[
    {
        "UserID":1,
        "UserName":"admin",
        "DisplayName":"管理员",
        "Email":"aaaaaaa@126.com"

    },{
       "UserID":2,
       "UserName":"test",
       "DisplayName":"测试",
       "Email":"ccccccc@126.com"
      }
]

 

 

posted @ 2014-06-12 20:14  云龙  阅读(1116)  评论(0编辑  收藏  举报