event.html
4.15 KB
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
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<th:block th:include="include :: header('自定义触发事件')" />
</head>
<body class="gray-bg">
<div class="container-div">
<div class="row">
<div class="col-sm-12 select-table table-striped">
<p class="select-title">自定义触发事件（点击某行/双击某行/单击某格/双击某格/服务器发送数据前触发/数据被加载时触发）</p>
<table id="bootstrap-table"></table>
</div>
</div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
var prefix = ctx + "demo/table";
var datas = [[${@dict.getType('sys_normal_disable')}]];
$(function() {
var options = {
url: prefix + "/list",
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
onCheck: onCheck,
onUncheck: onUncheck,
onCheckAll: onCheckAll,
onUncheckAll: onUncheckAll,
onClickRow: onClickRow,
onDblClickRow: onDblClickRow,
onClickCell: onClickCell,
onDblClickCell: onDblClickCell,
responseHandler: responseHandler,
onLoadSuccess: onLoadSuccess,
columns: [{
checkbox: true
},
{
field : 'userId',
title : '用户ID'
},
{
field : 'userCode',
title : '用户编号'
},
{
field : 'userName',
title : '用户姓名'
},
{
field : 'userPhone',
title : '用户手机'
},
{
field : 'userEmail',
title : '用户邮箱'
},
{
field : 'userBalance',
title : '用户余额'
},
{
field: 'status',
title: '用户状态',
align: 'center',
formatter: function(value, row, index) {
return $.table.selectDictLabel(datas, value);
}
},
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs" href="javascript:;"><i class="fa fa-edit"></i>编辑</a> ');
actions.push('<a class="btn btn-danger btn-xs" href="javascript:;"><i class="fa fa-remove"></i>删除</a>');
return actions.join('');
}
}]
};
$.table.init(options);
});
function onClickRow(row, $element){
alert("单击行userId：" + row.userId + " userName：" + row.userName);
}
function onDblClickRow(row, $element){
alert("双击行userId：" + row.userId + " userName：" + row.userName);
}
function onClickCell(field, value, row, $element){
alert("单击格name：" + field + " value：" + value);
}
function onDblClickCell(field, value, row, $element){
alert("双击格name：" + field + " value：" + value);
}
function onCheck(row, $element){
alert("选中行userId：" + row.userId + " userName：" + row.userName);
}
function onUncheck(row, $element){
alert("取消行userId：" + row.userId + " userName：" + row.userName);
}
function onCheckAll(rowsAfter, rowsBefore){
var rows = $.map(rowsAfter, function(row) {
return $.common.getItemField(row, "userId");
});
alert("全选行：" + rows);
}
function onUncheckAll(rowsAfter, rowsBefore){
var rows = $.map(rowsBefore, function(row) {
return $.common.getItemField(row, "userId");
});
alert("取消行：" + rows);
}
function responseHandler(res){
alert("请求获取数据后处理回调函数");
}
function onLoadSuccess(data){
alert("当所有数据被加载时触发");
}
</script>
</body>
</html>