layui学习使用问题整理 —— 数据表格

    layui 开发使用文档已经对数据表格的使用介绍的很详细了，但是还是有一些细节问题在使用中遇到了，在此记录一下。

 

1. 表头颜色设置

    直接在css中设置：

 body .layui-table th{
    	background-color:#5FB878;
        color: #fff;
        font-weight:bold;
    }

    通过js在表格加载完成后done方法设置：

done : function(res, curr, count) {
	//设置表头样式
	$('th').css({
		'background-color' : '#5FB878',
		'color' : '#fff',
		'font-weight' : 'bold'
	});
        }

2. 复选框在单元格中居中显示

.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
         top: 50%;
         transform: translateY(-50%);
    }

3.表格单元格添加tooltip

    对每个单元格添加的tooltip信息不同

$.each(res.data, function (i,item) {
    var index= item['LAY_TABLE_INDEX'];
    //设备描述列加tooltip
    $('tr[data-index=' + index + '] td[data-field="name（单元格的field）"]').hover(
        function() {
            detailTips = layer.tips(
                $('tr[data-index=' + index + '] td[data-field="name"] div').text(),                                   this, {tips : 3});
	}, function() {
	    layer.close(detailTips);
	});
});

4. 重写导出

    数据表格自带的导出只能导出当前页的数据，如果表格做了一些数据转换显示的模板，导出的数据也是原数据，所以不适合很多场合。

要在原位置上添加，首先去掉在工具栏去掉导出按钮显示      defaultToolbar: ['print'],

//添加导出按钮
if($(".layui-table-tool-self").find(".layui-icon-export").length == 0){
    $(".layui-table-tool-self").append(
	'<div class="layui-inline" title="导出" lay-event="exportData">' 
	+ '<i class="layui-icon layui-icon-export"></i></div>');
}

在工具栏监听新添加的导出操作。

table.on('toolbar(limitRuleDetailTable)', function(obj) {
    switch (obj.event) {
    case 'exportData': //导出
	// 获取数据data
        // table.exportFile(['列1','列2','列3'], data, 'xls');
    break;

5. 在表格工具栏插入搜索框

   在工具栏右侧添加

$('.layui-table-tool-temp').append(
	'<div style="float:right;">'							
	+ '<input type="text" style="width:120px;height:30px;float:left;"'
        + 'placeholder="请输入描述" class="layui-input">'
        + '<button class="layui-btn layui-btn-sm" lay-event="query" style="float:left;">查询</button></div>');

接下来监听query查询事件就OK

6. 表格删除最后一页所有数据，自动刷新到前一页

    表格删除数据后，刷新当前页显示，但是删除最后一页所有数据后，刷新出现无数据问题。

case 'del': // 删除
    layer.confirm('是否确认删除?', function(index) {
	$.ajax({
	    url : url,
	    type : "POST",
	    data : {id : id},
	    success : function(msg) {
		layer.close(index);//关闭弹框 
	        var curr = $(".layui-laypage-em").next().html();//当前页码
		table.reload('table',{
		    page : {curr:curr},
		    parseData : function(res){ //res 即为原始返回的数据
		    //当前页无数据并且当前页不是第一页，则刷新前一页
		    if(res.data.length == 0 && curr > 1){
			table.reload('limitRuleInfoTable',{page:{curr:curr-1}});
		    }else{
			return {
			    "code": res.code, //解析接口状态
			    "msg": res.msg, //解析提示文本
			    "count": res.count, //解析数据长度
			    "data": res.data //解析数据列表
			};
		    }
	
		});   	 
		layer.msg("删除成功", {icon : 6});
						
	}
});});
break;