电光石火-穿越时空电光石火-穿越时空


layui 表格的内容自适应换行

1、增加样式
       overflow:visible; #内容不会被修剪,会呈现在元素外
        text-overflow:inherit; #继承父类值
        white-space:normal; #浏览器默认值
        word-break: break-all;   #允许在单词内换行

    .layui-table-cell {
        height:auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
        word-break: break-all;
    }

2、

table.render({
                elem: '#conTbody'
                ,url: '${pageContext.request.contextPath}/personalCustomerAuctionController/getAuctionListReport' //数据接口
                ,title: '用户表'
                ,defaultToolbar:false
                ,limit:50
                ,limits:[50,75,100,200]
                 ,page:true
                ,where:{un:un,auctionIds:auctionIds}
                //,toolbar: '#toolbarDemo' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
                ,totalRow: false //开启合计行
                ,cols: [[ //表头
                    {field:'id',title:'序号',align:'center',templet:function(d){
                        return d.LAY_TABLE_INDEX+1;
                      }}
                    ,{field: 'auctionId', title: '场次编号', align: 'center',width:180}
                    ,{field: 'auctionName', title: '场次名称', align: 'center',width:250}
                    ,{field: 'customerName', title: '姓名', align: 'center'}
                    ,{field: 'phone', title: '电话', align: 'center'}
                    ,{field: 'remark', title: '备注',align: 'center'}
                    ,{field: 'companyName', title: '公司', align: 'center'}
                    ,{field: 'deposit', title: '保证金', align: 'center'}
                    ,{field: 'tenderConfirmYn', title: '投标确认书', align: 'center'}
                    ,{field: 'wtsYn', title: '委托书', align: 'center'}
                    ,{field: 'attendYn', title: '是否参与竞价', align: 'center'}

                ]], done: function (res, curr, count) {
                    // console.log(res)
                    //解决操作栏因为内容过多换行问题
                    $(".layui-table-main tr").each(function (index, val) {
                        $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                        $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                    });
                }
            })
本博客所有文章如无特别注明均为原创。作者:似水的流年
版权所有:《电光石火-穿越时空》 => layui 表格的内容自适应换行
本文地址:http://www.ilkhome.cn/index.php/archives/858/
欢迎转载!复制或转载请以超链接形式注明,文章为 似水的流年 原创,并注明原文地址 layui 表格的内容自适应换行,谢谢。

评论