zoukankan      html  css  js  c++  java
  • 在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"
          }
    ]
  • 相关阅读:
    ORACLE中的TOP-N查询(TOP-N分析)、分页查询
    ORACLE复杂查询之子查询
    ORACLE复杂查询之连接查询
    利用rand7() 产生rand10()(腾讯)
    汉罗塔1(递归和分治)
    数位dp(不要62)
    数位dp(二进制01问题)
    多重背包
    模拟(所有边权)
    模拟(进制)
  • 原文地址:https://www.cnblogs.com/fcu3dx/p/3784590.html
Copyright © 2011-2022 走看看