問題の背景
すべてのリストが1行で実行されるわけではありません。layui.table
サポート自动换行
が必要な状況が発生した場合は、この時点でlayuiのデータテーブルを変更して、自動行折り返しをサポートする必要があります。
達成したい効果は次のとおりです。(=。=元の画像が見つかりません。理解してください)
单行 => 多行自动换行
変換が完了した効果(自动换行
):
解決
コアコード/レトロフィットポイントは次のとおりです。
CSS
スタイルを変更し、改行(*必须
)をサポートします。
<style>
.layui-table-cell {
line-height: 20px !important;
vertical-align: middle;
height: auto;
overflow: visible;
text-overflow: inherit;
white-space: normal;
}
</style>
操作栏
表示を改善するには、高さの変換を増やします(可选
)。
done: function(res, curr, count){
$(".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.table.renderコード例:
//动态改变列宽大小
function changeWidth(width){
if(screen.width<1367){
return width/2;
}else if(screen.width<1601){
return width/1.5;
}else{
return width;
}
}
table.render({
elem: '#currentTableId',
method: 'post',
url: '${request.contextPath}/tender/list',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{
field: 'tenderName', minWidth: changeWidth(250),title: '名称', sort: true},
{
field: 'tenderDesc', minWidth: changeWidth(250),title: '预算金额(采购公告)/中标单位(中标公告)'},
{
field: 'source', title: '数据来源',minWidth:changeWidth(190),width:changeWidth(190)},
{
field: 'category', title: '分类',minWidth:changeWidth(100),width:changeWidth(100)},
{
field: 'tags', title: '标签',minWidth:changeWidth(100),width:changeWidth(100)},
{
title: '附件',minWidth:200,templet: function(d){
if(d.attachment!=null&&d.attachment!=""&&d.attachment!="[]"){
let att = "";
//修复attachment包含非法html符合导致报错问题
try{
let json = $.parseJSON(d.attachment);
for(let i = 0; i<json.length; i++){
att+=("<a target='_blank' href='"+renderHref(json[i].file)+"' ><i class='layui-icon layui-icon-download-circle'></i>"+json[i].name+"</a><br>");
}
return att;
}catch (e) {
console.log(e);
return "ERROR:包含非法HTML元素或JSON格式不正确";
}
}else{
return "";
}
}},
{
field: 'createTime',minWidth:120,width:120, title: '发布时间'},
{
title: '链接',minWidth:60,width:60,templet: function(d){
return '<a target="view_window" href="'+d.url+'"><i class="layui-icon layui-icon-website"></i></a>';
}},
{
title: '状态',minWidth:100,width:100,templet: function(d){
if(d.status===2){
return '<i class="layui-icon layui-icon-ok-circle" style="color: #01AAED">分析</i>';
}else if(d.status===3){
return '<i class="layui-icon layui-icon-close-fill" style="color: #FF5722">异常</i>';
}else if(d.status===0){
return '<i class="layui-icon layui-icon-delete" style="color: #eeeeee">废弃</i>';
}else{
return '<i class="layui-icon layui-icon-release" style="color: #5FB878">抓取</i>';
}
}},
{
title: '操作', minWidth: 60,width: 60, templet: '#currentTableBar',align: "center"}
]],
limits: [20 , 50 , 100 , 200 , 500 , 1000],
limit: 50,
page: true,
done: function(res, curr, count){
$(".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());
});
}
});
最終効果
Done !