Skip to content

Commit 36949a5

Browse files
spawpawspawpaw
committed
feat: add sample template
1 parent d2a8734 commit 36949a5

File tree

3 files changed

+347
-138
lines changed

3 files changed

+347
-138
lines changed

‎src/main/resources/template/html/index.vm‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>$Title$</title>
6-
</head>
7-
<body>
8-
$END$
9-
</body>
10-
</html>
1+
<div xmlns:th="http://www.thymeleaf.org" style="padding: 8px">
2+
<h1>${table.entityName}</h1>
3+
4+
<div th:replace="${table.entityLowerCamel}/template::list"></div>
5+
</div>

‎src/main/resources/template/html/list.vm‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!--html模板-->
2+
3+
<!--列表-->
4+
<div th:fragment="list" xmlns:th="http://www.thymeleaf.org" style="height: 100%;width: 100%">
5+
<div id="toolbar" class="btn-group">
6+
<button type="button" class="btn btn-default" onclick="showEditModal()">
7+
<i class="fas fa-plus"></i> 添加
8+
</button>
9+
<button type="button" class="btn btn-default" onclick="deleteBatch()">
10+
<i class="fas fa-times"></i> 删除选中行
11+
</button>
12+
</div>
13+
<table id="table-main"
14+
class="table table-striped"></table>
15+
<div id="button-toolbar"></div>
16+
17+
18+
<script th:inline="javascript">
19+
var moduleName = '${table.entityLowerCamel}';
20+
21+
function initTable() {
22+
$("#table-main").bootstrapTable({
23+
url: restfulApi.apiUrl(moduleName), // 获取表格数据的url
24+
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
25+
striped: true, //表格显示条纹，默认为false
26+
toolbar: "#toolbar",
27+
search: true,
28+
29+
// buttonsToolbar: "#button-toolbar",
30+
pagination: true, // 在表格底部显示分页组件，默认false
31+
pageList: [10, 20, 30, 50, 80, 100], // 设置页面可以显示的数据条数
32+
pageSize: 10, // 页面数据条数
33+
pageNumber: 1, // 首页页码
34+
paginationPreText: "上一页",
35+
paginationNextText: "下一页",
36+
sidePagination: 'server', // 设置为服务器端分页
37+
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
38+
return params;
39+
},
40+
sortName: 'id', // 要排序的字段
41+
sortOrder: 'asc', // 排序规则
42+
43+
clickToSelect: true,
44+
45+
46+
columns: [
47+
{
48+
checkbox: true, // 显示一个勾选框
49+
align: 'center' // 居中显示
50+
}, {
51+
field: 'id', // 返回json数据中的name
52+
title: '编号', // 表格表头显示文字
53+
sortable: true,
54+
align: 'center', // 左右居中
55+
valign: 'middle' // 上下居中
56+
#foreach($column in $table.columns)
57+
}, {
58+
field: "${column.actualName}",
59+
title: "${column.actualName}",
60+
sortable: true,
61+
align: 'center', // 左右居中
62+
valign: 'middle', // 上下居中
63+
clickToSelect: false,
64+
editable: {
65+
type: 'text',
66+
title: "${column.actualName}",
67+
mode: "popup",
68+
validate: function (v) {
69+
if (!v) return '${column.actualName} cannot be null';
70+
71+
}
72+
}
73+
#end
74+
}, {
75+
title: "操作",
76+
align: 'center',
77+
valign: 'middle',
78+
clickToSelect: false,
79+
width: 160, // 定义列的宽度，单位为像素px
80+
formatter: function (value, row, index) {
81+
return '<button class="btn btn-primary btn-sm" onclick="deleteOne(\'' + row.id + '\')">删除</button>';
82+
}
83+
}
84+
],
85+
onLoadSuccess: function (data) { //加载成功时执行
86+
console.info("加载成功:" + JSON.stringify(data));
87+
},
88+
onLoadError: function () { //加载失败时执行
89+
console.info("加载数据失败");
90+
},
91+
onEditableSave: function (field, row, oldValue, $el) {
92+
request("put", restfulApi.apiUrl(moduleName), row, "成功", "编辑失败，请重试");
93+
}
94+
})
95+
}
96+
97+
//显示编辑模态框
98+
function showEditModal() {
99+
$('#resetForm').click();
100+
$('#edit-modal').modal('show')
101+
}
102+
103+
//插入一条数据,数据从 $('#edit-modal') 中获取
104+
function insertOne() {
105+
var url = restfulApi.apiUrl(moduleName);
106+
var data = $('#edit-form').serializeJSON();
107+
request('post', url, data, '添加成功', '添加失败');
108+
}
109+
110+
function deleteOne(id) {
111+
var url = restfulApi.apiUrl(moduleName) + '/' + id;
112+
request('delete', url, '', '删除成功', '删除失败')
113+
}
114+
115+
function deleteBatch() {
116+
var selectedRows = $("#table-main").bootstrapTable('getSelections');
117+
var url = restfulApi.apiUrl(moduleName) + '?';
118+
console.log("rows: " + JSON.stringify(selectedRows));
119+
if (selectedRows == null || selectedRows.length == 0) {
120+
$.snackbar({content: "请先选中行"});
121+
return;
122+
}
123+
for (var i = 0; i < selectedRows.length; i++) {
124+
console.log("rowi: " + JSON.stringify(selectedRows[i]))
125+
url += "id=" + selectedRows[i].id + "&";
126+
}
127+
request('delete', url, '', '批量删除成功', '批量删除失败')
128+
}
129+
130+
function request(method, url, data, msgSuccess, msgFailure) {
131+
var csrf_parameterName = /*[[${_csrf.parameterName}]]*/"_csrf";
132+
var csrf_token = /*[[${_csrf.token}]]*/"";
133+
data[csrf_parameterName] = csrf_token;
134+
var headers = {};
135+
headers['X-CSRF-TOKEN'] = csrf_token;
136+
$.ajax({
137+
type: method,
138+
url: url,
139+
data: JSON.stringify(data),
140+
headers: headers,
141+
contentType: "application/json",
142+
dataType: 'json',
143+
success: function (data, status) {
144+
if (data.code == 0) {
145+
$.snackbar({content: msgSuccess});
146+
$('#edit-modal').modal('hide');
147+
} else {
148+
$.snackbar({content: '操作失败，错误码：' + data.code + "，错误信息：" + data.msg});
149+
150+
}
151+
},
152+
error: function (data) {
153+
$.snackbar({content: msgFailure});
154+
},
155+
complete: function () {
156+
$("#table-main").bootstrapTable('refresh');
157+
}
158+
});
159+
}
160+
161+
initTable();
162+
</script>
163+
164+
165+
<!--编辑表单-->
166+
<!-- Modal -->
167+
<div id="edit-modal" class="modal fade" tabindex="-1" role="dialog"
168+
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
169+
<div class="modal-dialog modal-dialog-centered" role="document">
170+
<div class="modal-content">
171+
<div class="modal-header">
172+
<h5 class="modal-title" id="exampleModalCenterTitle">创建用户</h5>
173+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
174+
<span aria-hidden="true">&times;</span>
175+
</button>
176+
</div>
177+
<div class="modal-body">
178+
<form action="" id="edit-form">
179+
#foreach($column in $table.columns)
180+
<div class="form-group">
181+
<label for="${column.actualName}" class="col-form-label">${column.actualName}:</label>
182+
<input type="text" class="form-control" id="${column.actualName}" name="${column.actualName}" required>
183+
</div>
184+
#end
185+
186+
<button type="reset" id="resetForm" hidden></button>
187+
</form>
188+
</div>
189+
<div class="modal-footer">
190+
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
191+
<button type="button" class="btn btn-primary" onclick="insertOne()">Save changes</button>
192+
</div>
193+
</div>
194+
</div>
195+
</div>
196+
</div>

0 commit comments

Comments
 (0)