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

2016-04-22 02:58:04 1.2k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

零度殇墨衍会员 · AI 创作全网分发关注 + 加入社区

根据JSON动态生成表单表格基于vite+element plus + ts 动态生成表格表单，表单支持添加删除行列。##3， CSS部分。阅读详情

想要实现的效果：

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

在<table>中是这样写的：

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

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

请问大神们，如何把JSON格式转化为想要的这种格式
或者改动JSON数据格式？或者有什么其他的方法

...全文

Javascript根据后台传过来的JSON生成TABLE Index.jsp Table Demo style.css @CHARSET "UTF-8"; .mytb { font-family:"Trebuchet 阅读详情

零度殇

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

零度殇 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"}, 。。。

斯洛文尼亚旅游 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

斯洛文尼亚旅游 2016-04-22

打赏
举报

发数据啊，搞个截图是要毛线

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

相关推荐