在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":"[email protected]"



    },{

       "UserID":2,

       "UserName":"test",

       "DisplayName":"测试",

       "Email":"[email protected]"

      }

]

 

 

你可能感兴趣的:(json)