<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>數據表格 </title>
<link rel="stylesheet" href="../../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../../css/layui.css"/>
</head>
<body style="margin-top:5px;">
<div>
<div class="right-content">
<table class="layui-table" id="table1" lay-filter="table1"></table>
</div>
</div>
</body>
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/layui/layui.all.2.4.3.js"></script>
<script type="text/javascript" src="../../js/public.js"></script>
<!-- 因涉及公司敏感內容，部分省略，圖為該段代碼效果圖 -->
<script type="text/javascript">
var myTable1Data; // 導出表格數據
var root = "http://..........";
var apis = {
MODAL_CONID_LIST: root + 'sdk/eventObject/queryPidInfo', // 模態框查詢內容ID
};
// ajax請求（application/json格式）
function getData(url, params, fn) {
$.ajax({
type: "post",
url: url,
contentType: 'application/json;charset=UTF-8',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
dataType: 'json',
data: JSON.stringify(params),
timeout: 20000,
success: function (data) {
if(data.success || data.result == 0) { // 成功
fn.call(null, data);
} else { // 失敗
layer.msg('未查詢到數據');
}
},
error: function(error) {
layer.msg('服務異常', {icon: 2});
}
});
}
function queryModalContentId(params) {
getData(apis.MODAL_CONID_LIST, params, function(data) {
console.log(data);
var list = data.datas.pids;
if(data.datas.length <1){
layer.msg('未查詢到數據');
return
}
list.forEach(function(item) {
item.checked = true;
item.LAY_CHECKED = true;
});
myTable1Data = list;
if(data.datas == 0 ) {
layer.confirm('是否顯示其他正常的內容ID?', {
btn: ['確定','取消'] //按鈕
}, function(index){
// table1渲染其他正確的PID
renderTable1(myTable1Data);
layer.close(index);
}, function(){
// layer.close();
});
} else { // 沒有錯誤PID
// 渲染table1
renderTable1(myTable1Data);
}
})
}
// 渲染模態框表格 (參數：模態框數據)
function renderTable1(data) {
myTable1.reload({
data: data
})
}
$(function(){
var params = {
endTime: "201902112359",
queryType: "1",
startTime: "201901211500"
};
// 請求數據
queryModalContentId(params);
myTable1 = layui.table.render({ // 導出表格
elem: '#table1',
page: true,
cols: [[
{type: 'checkbox', title: '全選', event:'check'},
{field: 'startTime', title: '活動時間', templet: function(d) {
return formatStrTime(d.startTime, 'yyyy/MM/dd HH:mm') + "-" + formatStrTime(d.endTime, 'yyyy/MM/dd HH:mm');
}},
{field: 'pid', title: 'PID',},
{field: 'contentId', title: '內容ID',}
]],
done: function(data) { //數據渲染完回調
tableDone();
layui.table.render('checkbox','table1');
console.log(layui.table.cache.table1, data,'渲染后數據');
}
});
// table1行監聽事件
var checkRow = {};
layui.table.on('row(table1)', function(obj) {
console.log(obj.data, '點擊行數據')
checkRow = obj.data;
});
// table1監聽復選框事件 （全選后第一個復選框切換無法獲取選中行數據）
layui.table.on('checkbox(table1)', function(obj) {
console.log(obj.checked);
if(obj.type == 'all') {
// 復選框全選切換
myTable1Data.forEach(function(item) {
item.checked = obj.checked;
item.LAY_CHECKED = obj.checked;
});
} else if(obj.type == 'one') {
// 單行復選框切換（當單行和全選同時 選中行數據解決采用行監聽事件獲取 ）
if(!obj.data.contentId) {
myTable1Data.forEach(function(item) {
if(item.contentId === checkRow.contentId && item.pid === checkRow.pid) {
item.checked = obj.checked;
item.LAY_CHECKED = obj.checked;
console.log(item);
}
});
} else {
myTable1Data.forEach(function(item) {
if(item.contentId === checkRow.contentId) {
item.checked = obj.checked;
item.LAY_CHECKED = obj.checked;
}
});
}
}
});
})
</script>
</html>
