table 动态列,显示异常

提问 已结 13 376
MyEuropean
MyEuropean 2019-5-23
悬赏:20飞吻
版本:layui layui-v2.4.5 浏览器:Chrome
{"code":0,"msg":"返回成功",
"cols":[
[{"type":"checkbox","fixed":"left","width":50,"rowspan":3},{"field":"Code","title":"货品编码","width":120,"rowspan":3},{"field":"Color","title":"颜色","width":80,"rowspan":3}],
[{"field":"x_1","title":"J","align":"center"},{"field":"x_2","title":"S","align":"center"},{"field":"x_3","title":"M","align":"center"},{"field":"x_4","title":"L","align":"center"},{"field":"x_5","title":"XL","align":"center"},{"field":"x_6","title":"2XL","align":"center"},{"field":"x_7","title":"3XL","align":"center"},{"field":"x_8","title":"4XL","align":"center"},{"field":"x_9","title":"5XL","align":"center"},{"field":"x_10","title":"5XL","align":"center"}],
[{"field":"x_1","title":"J","align":"center"},{"field":"x_2","title":"80","align":"center"},{"field":"x_3","title":"90","align":"center"},{"field":"x_4","title":"100","align":"center"},{"field":"x_5","title":"110","align":"center"},{"field":"x_6","title":"120","align":"center"},{"field":"x_7","title":"130","align":"center"},{"field":"x_8","title":"140","align":"center"},{"field":"x_9","title":"150","align":"center"},{"field":"x_10","title":"160","align":"center"}],
[{"field":"Quantity","title":"数量","width":100,"rowspan":3},{"field":"RelationUnitPrice","title":"结算价","width":100,"rowspan":3},{"field":"RelationAmount","title":"结算金额","width":100,"rowspan":3}]
],
"data":[{"Code":"wb701","SupplierCode":null,"Name":"黑笔","Model":null,"Unit":null,"Color":"红色","GroupNo":"05","age":null,"Season":null,"StopFlag":false,"x_1":1000,"x_2":null,"x_3":null,"x_4":null,"x_5":null,"x_6":null,"x_7":null,"x_8":null,"x_9":null,"x_10":null,"Quantity":1000,"RelationUnitPrice":null,"RelationAmount":0,"TradePrice":null,"TradeAmount":0,"Brand":null,"Storage":null,"RetailSales1":null,"RetailSales2":null,"RelationPurOrderNo":null,"RelationCustomer":null,"RelationSalesOrderNo":null},{"Code":"ZY4X173L","SupplierCode":null,"Name":"女两件套","Model":null,"Unit":null,"Color":"浅红","GroupNo":"01","age":"2014","Season":"夏装","StopFlag":false,"x_1":1000,"x_2":null,"x_3":null,"x_4":null,"x_5":null,"x_6":null,"x_7":null,"x_8":null,"x_9":null,"x_10":null,"Quantity":1000,"RelationUnitPrice":null,"RelationAmount":0,"TradePrice":null,"TradeAmount":0,"Brand":"ccc","Storage":null,"RetailSales1":null,"RetailSales2":null,"RelationPurOrderNo":null,"RelationCustomer":null,"RelationSalesOrderNo":null}]}



显示 换行了,有没大神能解决过这种问题,还在与货品在同一行
回帖
  • @MyEuropean 实际table的cols配置为啥要是一个二维的数组而不是一个一维的或者更多维的,实际就是可以将thead的tr 和th解析成cols,第一维对应tr, 第二维度对应的是每一个tr的th,所以实际刚开始不熟悉layui的table的话,可以自己先用最原始的table然后把html代码给写好,看效果是不是你要的,然后再将他翻译成cols,写过几次就知道其中的奥妙了,
    "cols":[
    [{"type":"checkbox","fixed":"left","width":50,"rowspan":2},
    {"field":"Code","title":"货品编码","width":120,"rowspan":2},
    {"field":"Color","title":"颜色","width":80,"rowspan":2},
    {"field":"x_1","title":"J","align":"center"},
    {"field":"x_2","title":"S","align":"center"},
    {"field":"x_3","title":"M","align":"center"},
    {"field":"x_4","title":"L","align":"center"},
    {"field":"x_5","title":"XL","align":"center"},
    {"field":"x_6","title":"2XL","align":"center"},
    {"field":"x_7","title":"3XL","align":"center"},
    {"field":"x_8","title":"4XL","align":"center"},
    {"field":"x_9","title":"5XL","align":"center"},
    {"field":"x_10","title":"5XL","align":"center"},
    {"field":"Quantity","title":"数量","width":100,"rowspan":2},
    {"field":"RelationUnitPrice","title":"结算价","width":100,"rowspan":2},
    {"field":"RelationAmount","title":"结算金额","width":100,"rowspan":2}
    ],
    [{"field":"x_1","title":"J","align":"center"},
    {"field":"x_2","title":"80","align":"center"},
    {"field":"x_3","title":"90","align":"center"},
    {"field":"x_4","title":"100","align":"center"},
    {"field":"x_5","title":"110","align":"center"},
    {"field":"x_6","title":"120","align":"center"},
    {"field":"x_7","title":"130","align":"center"},
    {"field":"x_8","title":"140","align":"center"},
    {"field":"x_9","title":"150","align":"center"},
    {"field":"x_10","title":"160","align":"center"}
    ]],
    你可以试一下这个是不是你要的头部,当然你的配置里面出现头部单列合并,即使头部对了也会出现tbody多出很多td的这个是另外一个问题,先解决头部不对的问题先,如果不是你要的你就给一下最终的示意图,或者用静态表格先实现先,截图给我看你最重要的形态。
    0 回复
  • 你这个cols是动态获取的?
    0 回复
  • MyEuropean
    2019-5-23
    @恰似你的温柔 但是后面的为什么换行到第二列
    0 回复
  • MyEuropean
    2019-5-23
    @恰似你的温柔 与这个有关系吗?不都是按照官方的格式来的吗?
    0 回复
  • cols这个是一个二维数组,你觉得他跟表格的tr的关系是什么?比如原始的thead里面只有两个tr,cols里面能有三个[]吗?
    0 回复
  • MyEuropean
    2019-5-23
    @岁月小偷 那这个要,怎么弄,是有三个[] ,但有些字段显示顺序,就要这样选择,我如果把数量 与结算金额放到第一个[]里面,显示格式就有问题了
    0 回复
  • MyEuropean
    2019-5-23
    @岁月小偷 谢谢大神,是这个样子,但是不明白,为什么要这个样子的格式,我看官方的写的,都是多个[]list的
    0 回复
  • MyEuropean
    2019-5-23
    @岁月小偷 还有每个单元格的大小,还能再调整吗?我好像不管理调整width:10 ,但是渲染出来都是最小的80[吃惊]
    0 回复
  • MyEuropean
    2019-5-23
    还有为什么向右拖动时,表头为什么不能动,

    表体内容,还会向左移动,表头被不可以,固定在那里不动了
    0 回复
  • MyEuropean
    2019-5-24
    @岁月小偷 经过一晚的通宵解决了,保留了原始的二维数组,因列名是一样的,最后通过修改title 的方式解决,你的那种方式会出现,多出了重复列的情况,table 列错位的解决方法,去掉fixed:left 属性解决,分享给大家少走弯路[哈欠]
    0 回复