关于bootstrap-table的使用

作为运维工程师，实习时，公司让开发一个设备管理系统，供内部人员使用，毕竟机房的机器也有一千多台了，而且分散在全国各地，一直用Excel管理的，多有不便，于是我就接到任务让开发这个系统

• 因为一直没怎么写过前端页面，在完成这个web任务的时候，踩过很多坑，下面我一一道来。

项目概况

• 整个项目使用的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>

• 然后用id=table来启动表格，代码如下

   <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">                              
               <h4 class="modal-title" align="center">设备详情</h4>    
           </div>                                                  
           <div class="modal-body">                                
             <p> -----</p>                                         
           </div>                                                  
           <div class="modal-footer">                              
           </div>                                                  
         </div>                                                    
     </div>                                                        
 </div>                                                            

• js代码

onClickRow: function (row, $element){                  
    $('#machemodal').modal("toggle");                  
    $('#machemodal p').html(" " +                      
        "<b>机房名称 : </b>" + row.name + "<br>" +         
        "<b>设备位置 : </b>" + row.location + "<br>" +     
        "<b>资产编号 : </b>" + row.noid + "<br>" +         
        "<b>设备类型 : </b>" + row.type + "<br>" +         
           ······   
}                                                      

其中onClickRow是插件封装好的一个事件，直接调用即可，row参数可获取点击行的所有数据，$element用来操作tr标签的