如何根据后台发的JSON数据动态的生成表格

零度殇 2016-04-22 02:58:04
想要实现的效果：


JSON对象的格式 {{"title":"",children:{"a":"x","b":"xx","c":"xxx","d","xxxx"},……}

在<table>中是这样写的：


实例中---数据格式是：（如需实现动态表格所需要的 数据格式）





我现在是这样写的 只是把所有子类划分出来了，但是不能实现一一对应的关系 但是 感觉无法写出 实例中的数据格式

请问大神们，如何把JSON格式转化为想要的这种格式
或者改动JSON数据格式？或者有什么其他的方法
...全文
1069 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
零度殇 2016-04-23
  • 打赏
  • 举报
 回复
引用 2 楼 bbboy8205 的回复:
去看一下 handlebars 吧，写如此多的js， 别人其实早就已经做好了这个车轮子了。。。 http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html
看了下 对我很有用。 再次感谢。
零度殇 2016-04-23
  • 打赏
  • 举报
 回复
引用 6 楼 showbo 的回复:

<table border="1">
    <script>
        var testData = [
                { nm1: "户内门" },
                { nm2: { name: "全屋", num: 3 }, nm3: { name: "户内门", num: 3 }, nm4: { name: "群升", num: 3 }, data: { name: "M-01", des: "清新象牙白实木复合户内门" } },
                { nm2: { name: "全屋", num: 0 }, nm3: { name: "户内门", num: 0 }, nm4: { name: "群升", num: 0 }, data: { name: "M-02", des: "高级白影木复合户内门" } },
                { nm2: { name: "全屋", num: 0 }, nm3: { name: "户内门", num: 0 }, nm4: { name: "群升", num: 0 }, data: { name: "M-03", des: "高级黑檀实木复合户内门" } },
                { nm1: "餐厅、客厅、走道" },
                { nm2: { name: "墙面", num: 5 }, nm3: { name: "乳胶漆", num: 3 }, nm4: { name: "立邦", num: 3 }, data: { name: "M-01", des: "立邦优雅象牙白" } },
                { nm2: { name: "墙面", num: 0 }, nm3: { name: "乳胶漆", num: 0 }, nm4: { name: "立邦", num: 0 }, data: { name: "M-02", des: "立邦皎洁月光白" } },
                { nm2: { name: "墙面", num: 0 }, nm3: { name: "乳胶漆", num: 0 }, nm4: { name: "立邦", num: 0 }, data: { name: "M-03", des: "立邦曼哈顿浅棕" } },
                { nm2: { name: "墙面", num: 0 }, nm3: { name: "墙纸", num: 2 }, nm4: { name: "X", num: 2 }, data: { name: "WP-01", des: "" } },
                { nm2: { name: "墙面", num: 0 }, nm3: { name: "墙纸", num: 0 }, nm4: { name: "X", num: 0 }, data: { name: "WP-01", des: "" } },
        ];
        var s = '';
        for (var i = 0; i < testData.length; i++) {
            if (testData[i].nm1) {
                s += '<tr><th colspan="5">' + testData[i].nm1 + '</th></tr>';
            }
            else {
                s += "<tr>"
                    + (testData[i].nm2.num ? '<td rowspan="' + testData[i].nm2.num + '">' + testData[i].nm2.name + '</td>' : '')
                    + (testData[i].nm3.num ? '<td rowspan="' + testData[i].nm3.num + '">' + testData[i].nm3.name + '</td>' : '')
                    + (testData[i].nm4.num ? '<td rowspan="' + testData[i].nm4.num + '">' + testData[i].nm4.name + '</td>' : '')
                    + '<td>' + testData[i].data.name + '</td>' + '<td>' + testData[i].data.des + '</td>'
                    + '</tr>';
            }
        }
        document.write(s);
    </script>
</table>
首先感谢版主回复 请问如何可以把 json数组 转化为 上述的testData的形式 {“local”:"户内门","space"：“墙面”,"name":"乳胶漆","brand":"立邦","model":"M-01","dex":"11"}, {“local”:"户内门","space"：“墙面”,"name":"乳胶漆","brand":"立邦","model":"M-02","dex":"22"}, {“local”:"户内门","space"：“墙面”,"name":"乳胶漆","brand":"立邦","model":"M-03","dex":"33"}, 。。。
Go 旅城通票 2016-04-22
  • 打赏
  • 举报
 回复 

<table border="1">
    <script>
        var testData = [
                { nm1: "户内门" },
                { nm2: { name: "全屋", num: 3 }, nm3: { name: "户内门", num: 3 }, nm4: { name: "群升", num: 3 }, data: { name: "M-01", des: "清新象牙白实木复合户内门" } },
                { nm2: { name: "全屋", num: 0 }, nm3: { name: "户内门", num: 0 }, nm4: { name: "群升", num: 0 }, data: { name: "M-02", des: "高级白影木复合户内门" } },
                { nm2: { name: "全屋", num: 0 }, nm3: { name: "户内门", num: 0 }, nm4: { name: "群升", num: 0 }, data: { name: "M-03", des: "高级黑檀实木复合户内门" } },
                { nm1: "餐厅、客厅、走道" },
                { nm2: { name: "墙面", num: 5 }, nm3: { name: "乳胶漆", num: 3 }, nm4: { name: "立邦", num: 3 }, data: { name: "M-01", des: "立邦优雅象牙白" } },
                { nm2: { name: "墙面", num: 0 }, nm3: { name: "乳胶漆", num: 0 }, nm4: { name: "立邦", num: 0 }, data: { name: "M-02", des: "立邦皎洁月光白" } },
                { nm2: { name: "墙面", num: 0 }, nm3: { name: "乳胶漆", num: 0 }, nm4: { name: "立邦", num: 0 }, data: { name: "M-03", des: "立邦曼哈顿浅棕" } },
                { nm2: { name: "墙面", num: 0 }, nm3: { name: "墙纸", num: 2 }, nm4: { name: "X", num: 2 }, data: { name: "WP-01", des: "" } },
                { nm2: { name: "墙面", num: 0 }, nm3: { name: "墙纸", num: 0 }, nm4: { name: "X", num: 0 }, data: { name: "WP-01", des: "" } },
        ];
        var s = '';
        for (var i = 0; i < testData.length; i++) {
            if (testData[i].nm1) {
                s += '<tr><th colspan="5">' + testData[i].nm1 + '</th></tr>';
            }
            else {
                s += "<tr>"
                    + (testData[i].nm2.num ? '<td rowspan="' + testData[i].nm2.num + '">' + testData[i].nm2.name + '</td>' : '')
                    + (testData[i].nm3.num ? '<td rowspan="' + testData[i].nm3.num + '">' + testData[i].nm3.name + '</td>' : '')
                    + (testData[i].nm4.num ? '<td rowspan="' + testData[i].nm4.num + '">' + testData[i].nm4.name + '</td>' : '')
                    + '<td>' + testData[i].data.name + '</td>' + '<td>' + testData[i].data.des + '</td>'
                    + '</tr>';
            }
        }
        document.write(s);
    </script>
</table>
零度殇 2016-04-22
  • 打赏
  • 举报
 回复
引用 1 楼 showbo 的回复:
发数据啊，搞个截图是要毛线
。。 之前没用过贴代码的这个功能
零度殇 2016-04-22
  • 打赏
  • 举报
 回复
引用 2 楼 bbboy8205 的回复:
去看一下 handlebars 吧，写如此多的js， 别人其实早就已经做好了这个车轮子了。。。 http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html
感谢回复 我去看看
零度殇 2016-04-22
  • 打赏
  • 举报
 回复
这个是动态实现表格的 
<tbody>
                <{each testData as lev1 l1Idx}>
                <{if lev1.nm1}>
                <tr>
                  <td colspan="5" align="center" style="width:100%;font-size:15px;background-color:#FFC504;"><{lev1.nm1}></td>
                </tr>
                <{ else }>
                <tr>
                  <{if lev1.nm2.num > 0}>
                  <td rowspan="<{lev1.nm2.num}>" align="center" style="width:20%;font-size:15px;background-color:#FFC504;"><{lev1.nm2.name}></td>
                  <{/if}>
                  <{if lev1.nm3.num > 0}>
                  <td rowspan="<{lev1.nm3.num}>" align="center" style="width:20%;font-size:15px;background-color:#FFC504;"><{lev1.nm3.name}></td>
                  <{/if}>
                  <{if lev1.nm4.num > 0}>
                  <td rowspan="<{lev1.nm4.num}>" align="center" style="width:20%;font-size:15px;background-color:#FFC504;"><{lev1.nm4.name}></td>
                  <{/if}>
                  <td align="center" style="width:20%;font-size:15px;background-color:#FFC504;"><{lev1.data.name}></td>
                  <td  align="center" style="width:20%;font-size:15px;background-color:#FFC504;"><{lev1.data.des}></td>
                </tr>
                <{/if}>
                <{/each}>
                </tbody>
根据这种数据格式 
 testData:[
            {nm1:"户内门"},
            {nm2:{name:"全屋",num:3},nm3:{name:"户内门",num:3},nm4:{name:"群升",num:3},data:{name:"M-01",des:"清新象牙白实木复合户内门"}},
            {nm2:{name:"全屋",num:0},nm3:{name:"户内门",num:0},nm4:{name:"群升",num:0},data:{name:"M-02",des:"高级白影木复合户内门"}},
            {nm2:{name:"全屋",num:0},nm3:{name:"户内门",num:0},nm4:{name:"群升",num:0},data:{name:"M-03",des:"高级黑檀实木复合户内门"}},
            {nm1:"餐厅、客厅、走道"},
            {nm2:{name:"墙面",num:5},nm3:{name:"乳胶漆",num:3},nm4:{name:"立邦",num:3}, data: {name:"M-01",des:"立邦优雅象牙白"}},
            {nm2:{name:"墙面",num:0},nm3:{name:"乳胶漆",num:0},nm4:{name:"立邦",num:0}, data: {name:"M-02",des:"立邦皎洁月光白"}},
            {nm2:{name:"墙面",num:0},nm3:{name:"乳胶漆",num:0},nm4:{name:"立邦",num:0}, data: {name:"M-03",des:"立邦曼哈顿浅棕"}},
            {nm2:{name:"墙面",num:0},nm3:{name:"墙纸",num:2},nm4:{name:"X",num:2}, data: {name:"WP-01",des:""}},
            {nm2:{name:"墙面",num:0},nm3:{name:"墙纸",num:0},nm4:{name:"X",num:0}, data: {name:"WP-01",des:""}},
          ],
自己写的遍历出JSON数据中的值: 但只是把所有类放在了同一个数组中，没有实现一一对应，比如哪几个是一个类下的子项： 
var title={};
var nm1={};
var newnm1={};
var nm2={};
var newnm2={};
var nm3={};
var newnm3={};
var ldata={};
var newldata={};

function getTest(specs){
  for(var i=0;i<specs.length;i++){
    if(!title.contains(specs[i].title)){
         if(newnm1){
           nm1.push(newnm1);
         }
         if(newnm2){
           nm2.push(newnm2);
         }
         if(newnm3){
            nm3.push(newnm3);
         }
         if(newldata){
            ldata.push(newldata);
         }
          newnm1={};
          newnm2={};
          newnm3={};
          newldata={};
          title.push(array[i].title);
          newnm1.push(array[i].children.space);
          newnm2.push(array[i].children.brand);
          newnm3.push(array[i].children.model);
          newldata.push(array[i].children.name);
    }else {
      if(!newnm1.contains(array[i].children.space)){
        nm2.push(newnm2);
        newnm2={};
        newnm1.push(array[i].children.space);
      }else {
        if(!newnm2.contains(array[i].children.brand)){
          nm3.push(newnm3);
          newnm3={};
          newnm2.push(array[i].children.brand);
          newnm3.push(array[i].children.model);
          newldata.push(array[i].children.name);
        }else {
          if(!newnm3.contains(array[i].children.model)){
            ldata.push(newldata);
            newldata={};
            newnm3.push(array[i].children.name);
            newldata.push(array[i].children.name);
          }else {
            newldata.push(array[i].children.name);
          }
        }
      }
    }
  }
}
风中的少年 2016-04-22
  • 打赏
  • 举报
 回复
去看一下 handlebars 吧，写如此多的js， 别人其实早就已经做好了这个车轮子了。。。 http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html
Go 旅城通票 2016-04-22
  • 打赏
  • 举报
 回复
发数据啊，搞个截图是要毛线
jsp实现HTML表格导出和导入Excel功能
在日常开发中，我们需要能够把页面上一个表格的内容导出到Excel中，然后用户修改后再导回到表格中的功能。 在这里，通过使用JQUERY＋JQUERY UI＋JSON-LIB＋POI实现这个功能数据导出设计：通过使用JQUERY分析表格的结构，读取表格结构数据构建JSON字符串，发送到后台，后台分析表格结构，然后生成Excel数据. 本程序基于是基于JDK1.5的，在MyEclipse环境下调试通过。
根据json数据动态生成表格，自定义表格的列数
最近的项目需要根据后台的返回数据动态生成表格，当返回的json数组长度大于4时，绘制一个多行4列的表格，当小于4时，只需要绘制列数为具体长度的表格。 自定义json数据如下： var jsonArr = [ { "name":"计算机组成原理" }, { "name":"计算机网络" }, { ...
用json 数据生成mysql 表_根据json数据动态生成表格，自定义表格的列数
最近的项目需要根据后台的返回数据动态生成表格，当返回的json数组长度大于4时，绘制一个多行4列的表格，当小于4时，只需要绘制列数为具体长度的表格。自定义json数据如下：var jsonArr = [{"name":"计算机组成原理"},{"name":"计算机网络"},{"name":"数据结构"},{"name":"网页程序设计"},{"name":"嵌入式开发"},{"name":"高等数...
JS中将ajax请求返回json数据动态生成表格显示在div中
1、页面内容 <div style="width:900px;height:400px;" id="tableInfo"></div> 2、js内容 $.ajax({ //使用JQuery内置的Ajax方法 type : "post", //post请求方式 async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） url : "cou...
js根据json对象数组动态生成表格
需求：(1).ajax取得json对象数组后，根据数组内所有json对象的所有key和value生成相应的表格标题和表格数据； (2).不显示json数据的某些key； (3).对某些key进行先后排序显示。 2.js代码： (function(){$("#queryButton").bind('click',function() {$.ajax({ url:"...", type:"POST
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章