BootStrapTable 如何解析多维json

Question

如题
这是要达到的效果

后台返回的json类似这样：

"rows":[
    {
      
      "name":"张三",
      "age":22,
      "like_fruit":[
          {
             "apple":"苹果1",
             "banana": "香蕉1",
             ...
          },
          ...        
      ],
    },
   ...
]

前台接收数据是这样：
responseHandler: function(res) {
            ....
            return res;
        },
        ...

BootStrapTable似乎一行只能解析一个一维json吗，那类似这样的表格该如何实现，急求解答，思路也行，或者说能否告知这种方案是否可行，谢谢

Answer 1

你用js控制循环两次就行了,不一定非得用bootStrap.代码如下:

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script>
        var rows = [{

                "name": "张三",
                "age": 22,
                "like_fruit": [{
                        "apple": "苹果1",
                        "banana": "香蕉1"
                    },
                    {
                        "apple": "苹果1",
                        "banana": "香蕉1"
                    }
                ]
            },
            {

                "name": "张三",
                "age": 22,
                "like_fruit": [{
                        "apple": "苹果1",
                        "banana": "香蕉1",
                    },
                    {
                        "apple": "苹果1",
                        "banana": "香蕉1",
                    }
                ],
            }
        ];

        for(var i = 0; i < rows.length; i++) {
            var obj = rows[i];
            console.log( obj )
            var spanAll = "";
            var obj_fruit_arr = obj.like_fruit;

            for(var j = 0; j < obj_fruit_arr.length; j++) {
                var obj_fruit = obj_fruit_arr[j];
                var span_1 = "<div class='tr2'><span>" + obj_fruit.apple + "</span><span>" + obj_fruit.banana + "</span></div>"; //如果还有别的水果,用span拼接到这里;
                spanAll += span_1;
            }
            var $li = $("<li class='tr1'><div class='td1'>" + obj.name + "</div><div class='td2'>" + obj.age + "</div><div class='td3'>" + spanAll + "</div></li>") ;
            console.log( $li )

            $(".ul_box").append($li);
        }
    </script>

Answer 2

colspan & rowspan

colspan和rowspan这两个属性用于创建特殊的表格。

colspan

colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数
该例通过把colspan设为“2”, 令所在单元格横跨了二列。如果我们将colspan设为“3”，则该单元格将跨越三列。 
 

rowspan

rowspan的作用是指定单元格纵向跨越的行数。

参考该链接:http://www.cnblogs.com/landea...

你这种需求 rowspan应该可以满足