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;