layer数据表格换行

在使用layer数据表格的时候,默认是不可以换行的。这样显示

 

改动后

数据格式为   aa<br>bb就会显示为换行

 

比如我们的字符串是    a<br>b

这样的字符串浏览器会把它解析换行的,但是layer的数据表格的单元格高度就是那么高,不变,底层数其实是加载到了,但是由于高度不够,所以不显示

 

/* layui-table 表格内容允许换行 */
.layui-table-cell {
height: inherit;
}
/* layui-table 表格内容允许换行 */
.layui-table-cell {
height: auto;
}

两种都可以,这是使用高度时候 auto 和 inherit 的区别

 

 其他人的解释:

inherit是继承父类的属性,一般用于字体、颜色、背景等
auto是按情况自适应,一般用于高度、宽度、外边距和内边距等关于长度的属性
现在一般常用的属性都支持inherit,用的不多,auto自适应长度用的比较多。如{ margin:0 auto}加上这个属性的元素只要定义了宽度就会相对于他的父元素自居中。

 

 

学习到一个知识点:

 layui中如果想要合并表体的单元格,可以使用layui的模版,然后在模版中作出调整

每个单元格中多加几行,行与行之间可以使用  横线<hr/>   来作为每行之间的分割线。

同事想到的做的,自己只是积累他人的知识成为自己的。

转载于:https://www.cnblogs.com/renjianjun/p/9878011.html

在Lodop(一个强大的.NET打印控件)结合layuiJavaScript环境中,你可以通过以下几个步骤来实现这个功能: 1. **创建HTML结构**:首先,你需要构建一个包含表格数据的HTML模板。使用layui提供的table组件,每个单元格可以设置`title`属性用于存储换行和分隔符信息。 ```html <table id="printTable" lay-filter="print"> <thead> <tr> <th>列1</th> <th>列2</th> <!-- 添加更多列 --> </tr> </thead> <tbody> <!-- 动态填充数据 --> </tbody> </table> ``` 2. **数据处理**:在JavaScript中,遍历后台返回的数据,并计算每个字段的最大长度。使用`split`方法将长字符串分割成数组,然后将数组作为单元格的内容。 ```javascript function processData(data) { for (var i = 0; i < data.length; i++) { var row = data[i]; for (var j = 0; j < row.length; j++) { if (row[j].length > maxFieldLength) { // 拆分为多并添加分隔符 row[j] = row[j].split('\n').join('<br>') + '<span class="separator">---</span>'; } } } } ``` 3. **样式设置**:创建CSS样式,如`.separator`类用于显示分隔符,例如: ```css .separator { display: inline-block; width: 1px; margin: 0 5px; border-left: 1px solid #ccc; } ``` 4. **渲染到页面**:在Layui的表单加载完成之后,调用`processData`函数,更新表格内容。 ```javascript layui.use(['form', 'layer'], function () { layui.form(); processData(yourData); // 传入从服务器获取的数据 // 打印按钮事件处理 $('#printBtn').click(function () { Lopd.open({ print: true, // 打印模式 printTitle: '报表标题', content: '#printTable' // 将表格元素ID传递给Lopd }); }); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值