1.表格中不想内容隐藏,改为自动换行
页面样式中写入
.layui-table-cell {
height: auto;
/*空白会被浏览器忽略*/
white-space: normal;
/*允许长单词换行到下一行*/
word-wrap: break-word;
/*允许在单词内换行*/
word-break: break-all;
}
内容即可显示正常自动换行。
2.表格中时间戳转换为正常时间显示
字段中模板如下:
['field' => 'create_time','title' => '时间','align'=>'center','width' => 200,
'templet'=> '<div>{{ layui.laytpl.toDateString(d.create_time) }}</div>'],
js中加入2个函数
layui.laytpl.toDateString = function(d, format){
var date = new Date(d*1000 || new Date())
,ymd = [
this.digit(date.getFullYear(), 4)
,this.digit(date.getMonth() + 1)
,this.digit(date.getDate())
]
,hms = [
this.digit(date.getHours())
,this.digit(date.getMinutes())
,this.digit(date.getSeconds())
];
format = format || 'yyyy-MM-dd HH:mm:ss';
return format.replace(/yyyy/g, ymd[0])
.replace(/MM/g, ymd[1])
.replace(/dd/g, ymd[2])
.replace(/HH/g, hms[0])
.replace(/mm/g, hms[1])
.replace(/ss/g, hms[2]);
};
//数字前置补零
layui.laytpl.digit = function(num, length, end){
var str = '';
num = String(num);
length = length || 2;
for(var i = num.length; i < length; i++){
str += '0';
}
return num < Math.pow(10, length) ? str + (num|0) : num;
};
即可把时间戳转换为正常的年月日 时分秒来显示。
3.表格中列动态显示
表格渲染部分的cols从后台获取
table.render({
elem: '#lists-table'
,url:"{:url($Request.controller.'/getData')}"
,cellMinWidth: 80
,height:'full-145'
,page:true
,limit:15
,limits:[15,30,50,100,200,500,1000]
,response: {
statusCode: 200 //成功的状态码,默认:0
}
,cols: [
{$table}
]
});
后台代码根据判断,来修改变量table中的值,如:
public function index(){
//定义数据表格
$table = [
['field' => 'id', 'title' => 'ID','width'=>60],
['field' => 'username','title' => '姓名','align'=>'center','width' => 90],
['field' => 'phone', 'title' =>'手机号','align'=>'center', 'width' => 120],
['field' => 'status','title' => '状态','align'=>'center','width' => 200,'templet'=>'#tb-status'],
//操作标签
];
$data = "select * from user";
if ($data['status'] == 1) {
$table[] = ['field' => 'nihao', 'title' =>'你好','align'=>'center', 'width' => 120];
} else if ($data['status] == 2) {
$table[] = ['field' => 'hello', 'title' =>'哈喽','align'=>'center', 'width' => 120];
} else {
$table[] = ['field' => 'world', 'title' =>'世界','align'=>'center', 'width' => 120];
}
$table[] = ['field' => 'create_time','title' => '时间','align'=>'center',
'width' => 200,'templet'=> '<div>{{ layui.laytpl.toDateString(d.create_time) }}</div>'];
$table[] = ['title' => '操作','align' => 'center','toolbar' => '#tb-action',];
$this->assign('table', json_encode($table));
return $this->fetch();
}
这样即可根据需求,显示对应的表格字段。