table.js
function Table(id, headData, listData) {
this.id = id;
this.headData = headData || [];
this.listData = listData || [];
//初始化表格
var $table = $('<table class="i-table"><thead><tr></tr></thead><tbody></tbody></table>');
this.headData.forEach(function(item){
$table.find("thead tr").append(`<td ${
item.width ? 'style="width:' + item.width + 'px;flex:0 1 auto;"' : ""}>${
item.label}</td>`);
})
$("#"+this.id).append($table);
this.updateData(this.listData);
}
//更新表格tbody
Table.prototype.updateData = function(list) {
this.listData = list || [];
var $table = $("#"+this.id).find("table");
$table.find("tbody").empty();
this.listData.forEach(function(listItem, listIndex) {
var $tr = $("<tr></tr>")
this.headData.forEach(function(headItem) {
if(headItem.type === "index"){
$tr.append(`<td ${
headItem.width ? 'style="width:' + headItem.width + 'px;flex:0 1 auto;"' : ""}>${
listIndex + 1}</td>`);
}else if(headItem.type === "operation"){
var $td = $(`<td ${
headItem.width ? 'style="width:' + headItem.width + 'px;flex:0 1 auto;"' : ""}></td>`);
if(Array.isArray(headItem.operationList)){
headItem.operationList.forEach(function(operation){
$td.append($(`<span class="operation-btn" data-value="${
operation.value}" οnclick="${
headItem.callback}(${
listIndex},${
operation.value})">${
operation.text}</span>`))
})
}
$tr.append($td);
} else {
$tr.append(`<td ${
headItem.width ? 'style="width:' + headItem.width + 'px;flex:0 1 auto;"' : ""}>${
listItem[headItem.key]}</td>`);
}
})
$table.find("tbody").append($tr);
})
}
table.css
.i-table, .i-table>thead, .i-table>tbody,.i-table>thead>tr,.i-table>tbody>tr{
width: 100%;
}
.i-table>thead>tr, .i-table>tbody>tr{
display:flex;
border-bottom: 1px solid #ebeef5;
}
.i-table>thead>tr>td, .i-table>tbody>tr>td{
width:0;
flex: 1;
word-wrap: break-word;
}
/** 头部 */
.i-table>thead{
background-color:#f7f7f7;
}
.i-table td{
padding: 15px 10px;
font-size:12px;
}
/** 操作栏 */
.i-table .operation-btn {
color: #2d8cf0;
margin-right: 10px;
cursor: pointer;
}
使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link type="text/css" rel="stylesheet" href="./table.css" />
</head>
<body>
<div id="table"></div>
<div id="table1"></div>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./table.js"></script>
<script type="text/javascript">
var listData = [
{
"DesignName": "test002",
"DesignTypeName": "建筑设计",
"status": "审核中",
"DesignId": "172243318527653551",
"srcDom": '',
"address":"广东省广州市天河区棠下街道棠东菱角大街",
},
{
"DesignName": "test003",
"DesignTypeName": "景观设计",
"status": "驳回",
"DesignId": "172243318527653551",
"srcDom": '',
"address":"广东省广州市天河区棠下街道棠东菱角大街",
},
{
"DesignName": "test004",
"DesignTypeName": "景观设计",
"status": "驳回",
"DesignId": "172243318527653551",
"srcDom": '',
"address":"广东省广州市天河区棠下街道棠东菱角大街",
},
{
"DesignName": "test005",
"DesignTypeName": "景观设计",
"status": "驳回",
"DesignId": "172243318527653551",
"address":"广东省广州市天河区棠下街道棠东菱角大街",
"srcDom": '<img src="http://img.kinpan.com/Files/design/detailimages/20190807/6370078721387767074231224.jpg" style="width:100%"/>'
},
{
"DesignName": "test006",
"DesignTypeName": "室内设计",
"status": "审核中",
"DesignId": "172243318527653551",
"address":"广东省广州市天河区棠下街道棠东菱角大街",
"srcDom": '<img src="http://img.kinpan.com/Files/design/detailimages/20190807/6370078721387767074231224.jpg" style="width:100%"/>'
}
]
// 操作栏按钮点击回调事件
function operationCallback (listIndex, operationValue) {
console.log("行：", listIndex, "操作按钮值：", operationValue)
}
var headData = [
{
label:'序号', width: 30, type:'index'},
{
label:'项目名称', key:'DesignName'},
{
label:'地址', key:'address'},
{
label:'类型', key:'DesignTypeName'},
{
label:'认证状态', key:'status'},
{
label:'图片', key:'srcDom',type:'default'},
{
label:'操作',
width: 150,
type:'operation',
callback: 'operationCallback',
operationList:[
{
text:'删除', value: 1 },
{
text:'编辑', value: 2 },
{
text:'审批', value: 3 },
]
}
]
var tabel = new Table("table", headData);
tabel.updateData(listData);
</script>
</body>
</html>