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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
| layui.use(['table', 'jquery', 'form'], function () {
var table = layui.table
, form = layui.form
, $ = layui.jquery
, list = []
, selectedIds = []; // 存放已选中行的id数组
function getRandomName() {
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
var name = '';
for (var i = 0; i < 5; i++) {
name += letters.charAt(Math.floor(Math.random() * letters.length));
}
return name;
}
for (var i = 1; i <= 100; i++) {
list.push({ id: i, name: getRandomName(), score: Math.floor(Math.random() * 1000) + 1 });
}
var adTable = {
/*
* 获取表格当前页码
* @param key：缓存中pages的key值
* @param data：填充表格的数据数组
* @param limit：每页显示条数
*/
getPageCur: function(key, data, limit) {
var cur, // 当前页码
obj = JSON.parse(localStorage.getItem("pages")), // 缓存中的pages对象
totalPage = Math.ceil(data.length/limit); // 总页数
// 存在缓存变量pages
if(obj) {
// 缓存中是否有当前表格的页码记录（没有该页码记录，重置为1）
cur = obj[key] ? obj[key] : 1;
} else {
// 不存在缓存变量pages
cur = 1;
}
// 总页数小于当前页码（解决表格删除最后一页最后一条数据)
if(totalPage < cur) {
cur = 1;
}
return cur;
}
/*
* 设置当前表格页码
* @param key：key值
* @param val：value值
*/
, setPageCur: function(key, val) {
// 使用对象缓存，是因为有些页面有多层页面，记住多个页面的页码
var pages = JSON.parse(localStorage.getItem("pages")) || {}; // 缓存中pages对象
pages[key] = val; // 设置页码
pages = JSON.stringify(pages);
localStorage.setItem("pages", pages); // 重新放到缓存中
}
}
var page_curr = adTable.getPageCur("testTable", list, 10); // 10是分页的limit值
table.render({
elem: '#testTable'
, data: list
, page: {
curr: page_curr
, limit: 10
}
, cols: [[
{
field: 'checkbox', title: '<input type="checkbox" id="checkAll" lay-filter="checkAll" lay-skin="primary">', width: 66, templet: function (res) {
return '<input type="checkbox" class="rowCheck" data-id="' + res.id + '" lay-filter="rowCheck" lay-skin="primary">';
}
}
, { field: 'id', title: 'ID' }
, { field: 'name', title: '用户名' }
, { field: 'score', title: '评分' }
]]
, done: function (res, curr, count) {
// 重置表格的样式
if(selectedIds.length > 0) {
// 根据已选selectedIds集合，修改复选框的样式（表头的复选框针对所有行数据，layui框架的全选只针对当前页）
selectedIds.map(function(item) {
$('.layui-table input[data-id="'+ item +'"]').prop('checked', true);
})
// 重新渲染
form.render('checkbox');
}
// 记录当前页面
adTable.setPageCur("testTable", curr);
}
});
// 监听表格中表头全选复选框的选择事件
form.on('checkbox(checkAll)', function (data) {
if (!list.length) {
$('input[lay-filter="checkAll"]').prop('checked', false);
}
// 是否全选
var isAllChecked = data.elem.checked ? true : false;
// 是否被选中
if (isAllChecked) {
selectedIds = list.map(function (item) {
return item.id;
})
} else {
selectedIds = [];
}
console.log(selectedIds);
// 更新表格中的复选框样式
$('.rowCheck').prop('checked', isAllChecked);
form.render('checkbox');
});
// 监听表格中的复选框
form.on('checkbox(rowCheck)', function (data) {
var isChecked = data.elem.checked // 是否被选中
, isAllChecked = false // 是否全选
, _id = $(data.elem).data("id");// 当前项的id
if (isChecked) {
// 追加
selectedIds.push(_id);
isAllChecked = (selectedIds.length == list.length) ? true : false;
} else {
// 减去
var index = selectedIds.indexOf(_id);
selectedIds.splice(index, 1);
isAllChecked = false;
}
// 进行排序
selectedIds.sort(function (a, b) {
return a - b;
});
console.log('selectedIds');
console.log(selectedIds);
// 更新全选复选框的样式
$('#checkAll').prop('checked', isAllChecked);
form.render('checkbox');
});
});
|
