自定义表头

  • 有时候遇见表格表头比较多的时候,我们的产品会要求自定义表格内容。用户选择什么,表格内容就显示什么

效果图

  1. 样式采用 bootstrap,简单且丑
  2. 2.代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<button type="button" class="mb10 mt10 customTable ">自定义列表</button>
<div id="hasDataList">
<table class="table-box" cellpadding="0" cellpadding="0" width="0" border="0">
<thead>
<tr id="diyTblTrJs1">
<td>序号</td>
<td>编号</td>
<td class="xm">姓名</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0643253</td>
<td class="xm">张三</td>
</tr>
<tr>
<td>2</td>
<td>0643253</td>
<td class="xm">李四</td>
</tr>
</tbody>
</table>
</div>
<div
class="modal fade"
id="myModalTableList"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
>
<div class="modal-dialog" role="document">
<div class="modal-content" style="width:675px">
<div class="modal-header no-border">
<h5>
自定义列表
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</h5>
</div>
<div class="modal-body line-28">
<p class="fw700">
选择需要显示的信息<label class="ml20"
><input type="checkbox" name="checkAll" value="" />全选</label
>
</p>
<div class="clearfix" id="cjDivListCheckBox">
<label class="fl w25 pr20"
><input
type="checkbox"
name="table-list"
value="xm"
data-lname="姓名"
/>姓名</label
>
</div>
<div class="clearfix mt20 tc footbtn">
<button
type="button"
class="btn btn-primary mr5"
id="btnYs"
onclick="divListQr(1, 'hasDataList', 'myModalTableList');"
>
确认
</button>
<button
type="button"
class="btn btn-white"
data-dismiss="modal"
aria-label="Close"
>
取消
</button>
</div>
</div>
</div>
</div>
</div>

一个表格,一个弹框,一个 button。这是精简后的代码;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function divListQr(listType, dataListStr, modalStr) {
var tdArr = [];
var tdNameArr = [];
$("input[name='table-list']:checked").each(function() {
//存弹框选中的值
var tdKey = $(this).val();
tdArr.push(tdKey);
tdNameArr.push($(this).data("lname"));
});
showTableTd(tdArr, dataListStr, modalStr);
$("#diyTblTrJs1").html($("#diyTblTrJs1").html()); //值显示
}
function showTableTd(tdArr, dataListStr, modalStr) {
//控制列表的
$("input[name='table-list']").each(function() {
var tdKey = $(this).val();
if ($.inArray(tdKey, tdArr) == -1) {
//控制列表的显示隐藏
$("#" + dataListStr + " ." + tdKey).hide();
} else {
$("#" + dataListStr + " ." + tdKey).show();
}
});
$("#" + modalStr).modal("hide");
}

这边是写死的,就会导致数据其实也是一次性取到的,可以改成动态的。

详细代码:

https://github.com/sulishibaobei/customTable

谢谢你给我的支持,坚持原创技术分享,共同成长