作为运维工程师,实习时,公司让开发一个设备管理系统,供内部人员使用,毕竟机房的机器也有一千多台了,而且分散在全国各地,一直用Excel管理的,多有不便,于是我就接到任务让开发这个系统
整个项目使用的Flask框架,因为用框架开发的话,比较方便,毕竟不是特别擅长前端开发,而且还要和原有的一个系统对接
因为目前数据不多,我就直接处理了excel数据转换成json,后期迭代的话,想着用MongoDB来存储数据
这个插件的官网
github项目地址
将项目clone或者下载到本地
并将文件放入Flask的static目录,到时候直接引用
<link rel="stylesheet" href="static/bootstrap-table/src/bootstrap-table.css">
<script src="static/assets/jquery.min.js">script>
<script src="static/bootstrap-table/src/bootstrap-table.js">script>
<script src="static/bootstrap-table/src/locale/bootstrap-table-zh-CN.js">script>
<table id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="false"
data-show-columns="true"
data-show-export="false"
data-detail-view="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, ALL]"
data-show-footer="false"
data-side-pagination="server"
data-url="get_data"
data-response-handle="responseHandler">
</table>
关于这些data-xxx的参数可以在官网查到,而且有中文很好理解,也有相应的示例
table表格启动有两种方式,github示例解释有两种,此处我选择使用js来实现,比较动态灵活
js启动代码如下
<script>
258 var $table = $('#table'),
259 $remove = $('#remove'),
260 selections = [];
261
262 function initTable() {
263 $table.bootstrapTable('destroy');
264 $table.bootstrapTable({
265 height: getHeight(),
266 columns: [
267 [
268 {
269 field: 'state',
270 checkbox: true,
271 rowspan: 2,
272 align: 'center',
273 valign: 'middle'
274 }, {
275 title: '机房名称',
276 field: 'name',
277 rowspan: 2,
278 align: 'center',
279 valign: 'middle',
280 sortable: true,
281 footerFormatter: totalTextFormatter
282 },{
283 title: '设备位置',
284 field: 'location',
285 rowspan: 2,
286 align: 'center',
287 valign: 'middle',
288 sortable: true,
289 footerFormatter: totalTextFormatter
290 },
这里面是一些要现实的字段,可以自己定义,后台传数据时,字段名称必须一样,然后在js里面启动这个初始化函数就可以了
Flask里面根据路由来决定调用就可以了,代码如下
@app.route('/get_data', methods=['GET']).
467 def get_data():
468 if request.method == "GET":
469 info = request.values
470 limit = info.get('limit', 1000)
471 offset = info.get('offset', 0)
472 order = info.get('order', 'asc')
473 mache_info = json.load(open('info.json', 'r', encoding='utf-8'))
474 total = len(mache_info['xxx']) + len(mache_info['xxx'])
475 data = []
476 for key in mache_info:
477 for member in mache_info[key]:.
478 d = {}
479 d['name'] = member[0]
480 d['location'] = member[1]
481 d['noid'] = member[2]
482 d['type'] = member[3]
483 d['machetype']= member[4]
484 d['serial'] = member[5]
485 d['hostname'] =member[6]
486 d['specification'] =member[7]
487 d['department'] = member[8]
488 d['infomation'] = member[9]
489 data.append(d)
490 return jsonify({'total': total, 'rows': data[int(offset):(int(offset) + int(limit))]})
接着之前所做的,现在做了一个小功能。目前因为每行要显示的资料略微有些多,所以做了一个点击弹窗的功能,在弹窗显示当前行所有的内容,代码如下
<div class="modal" id="machemodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
class="modal-title" align="center">设备详情
div>
<div class="modal-body">
-----
div>
<div class="modal-footer">
div>
div>
div>
div>
onClickRow: function (row, $element){
$('#machemodal').modal("toggle");
$('#machemodal p').html(" " +
"机房名称 : " + row.name + "
" +
"设备位置 : " + row.location + "
" +
"资产编号 : " + row.noid + "
" +
"设备类型 : " + row.type + "
" +
······
}
其中onClickRow是插件封装好的一个事件,直接调用即可,row参数可获取点击行的所有数据,$element用来操作tr标签的