京东订单列表 样式的渲染

Question

上面的效果 如果做静态的话 很简单 设置一个 rowspan=2 就行了 !!上面的第一条订单 是 一个tbody 里面 两个tr ,假如我得到的数据{    name: '张三',    total: '$1000',    address: '美国省 牛逼市'    ...    list: [        {'商品1的图片 和 标题'},        {'商品2...          '}        ...    ]}让大家看看京东的结构关键是后面那两个tr 都是加载上面那两个风扇的的信息的前面一个是5个td 后面居然只有一个 一般来说 后面的两个的tr 用ajax来加载 应该是一样的结构的 这个是怎么做的? 希望大家提供些思路...

Answer 1

根据返回的数据就可以做了啊。

{

    code: '200',

    message: 'ok',

    data: [

      {

         id: '1',

         date: '2017-6-20',

         totalPrice: 120,

         details: [

           {商品标题和图片以及数量},

           {商品标题和图片以及数量}

         ]

      },

      {

         id: '2',

         date: '2017-6-20',

         totalPrice: 120,

         details: [

           {商品id、标题和图片以及数量}

         ]

      }

    ]

}

根据details的长度就可以做了啊。外围的是后面显示的信息，details是对应的每一个商品的订单详情。有几个显示几个，rowspan等于details的长度就行了啊。