layui 数据表格使用

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();
}

这样即可根据需求，显示对应的表格字段。