7 Django系列之關於bootstrap-table插件的簡單使用

preface

我們在前端html頁面的時候做表格最常用的就是jinja2渲染，這樣的好處是無須引用外部插件，直接使用就行，方便。但是不好的就是前端CSS樣式以及其他表格排序篩選功能需要自己寫，增加了自己的代碼量。為了提高前端的美觀性以及功能性，我便開始使用第三方插件來做表格了。bootsrap-table這個插件，官網地址。
好了，廢話不多說，我們開始說說怎么使用這個插件。

前端代碼：

我們先看前端代碼，這段代碼插在html頁面里面：
先簡單解釋下 羅列的參數：

• data-toggle： 不用寫 JavaScript 直接啟用表格。
• data-url ： 獲取數據的url，可以使用jinja的寫法。
• data-method： 獲取數據的方法，建議寫get，寫post的話，django后端收不到post過來的數據。
• data-pagination 設置為 true 會在表格底部顯示分頁條
• data-side-pagination 設置分頁的動作由后端django來做分頁
• data-page-list： 設置可供選擇的頁面數據條數。設置為All 則顯示所有記錄。
• data-search： 啟用搜索框
• searchOnEnterKey 設置為 true時，按回車觸發搜索方法，否則自動觸發搜索方法
• data-show-refresh： 是否顯示刷新按鈕
• data-show-columns 內容列下拉框，在右上角的。
• data-show-toggle 是否顯示 切換試圖（table/card）按鈕
• data-page-size 默認分頁大小20行
• data-unique-id 設置table的主鍵為哪一列
• data-striped 設置為 true 會有隔行變色效果
• data-sortable 允許這列排序
• data-field 表示這個列數據設置一個名字，后端傳入數據過來的時候屬於這列的數據也必須帶有相同的名字。待會看看后端的代碼就知道怎么回事了。

html前端代碼

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
<table id="asset_list_table" class="display table  table-hover" data-toggle="table"
                data-url="{% url 'show_asset_in_table' %}"
                data-method="get"
                data-pagination="true"
                data-side-pagination="server"
                data-page-list="[10, 20, 50, 100, 200]"
                data-search="true" data-mobile-responsive="true" searchOnEnterKey="true"
                data-show-refresh="true" data-show-columns="true"
                data-show-toggle="true" data-page-size=20 data-unique-id="asset_id"
                data-striped="true"
                >
              <thead >
                    <tr>
                    <th data-field="state" data-checkbox="true"></th>
                    <th data-field="asset_id" data-align="center" data-sortable="true">資產ID(點擊ID查看詳情)</th>
                    <th data-field="asset_sn" data-align="center" data-sortable="true"  data-width="50px">資產編號</th>
                    <th data-field="asset_business_unit" data-sortable="true">產品線</th>
                    <th data-field="asset_name" data-align="center" data-sortable="true"  data-class="asset_name">資產名</th>
                    <th data-field="asset_management_ip" data-align="center" data-sortable="true"  data-class="asset_management_ip">管理IP</th>
                    <th data-field="asset_manufactory" data-sortable="true">廠商</th>
                    <th data-field="asset_type" data-sortable="true">類型</th>
                    <th data-field="asset_os_release" data-sortable="true">操作系統</th>
                    <th data-field="asset_salt_minion_id" data-sortable="true">saltminion_id</th>
                    <th data-field="asset_cpu_model" data-sortable="true">CPU型號</th>
                    <th data-field="asset_cpu_count" data-sortable="true">CPU個數</th>
                    <th data-field="asset_cpu_core_count" data-sortable="true">CPU總核數</th>
                    <th data-field="asset_rams_size" data-sortable="true">內存大小（MB）</th>
                    <th data-field="asset_localdisks_size" data-sortable="true">磁盤總空間（GB）</th>
                    <th data-field="asset_admin" >資產管理員</th>
                    <th data-field="asset_idc" data-sortable="true">機房名</th>
                    <th data-field="asset_trade_date" data-sortable="true">購買日期</th>
                    <th data-field="asset_create_date" data-sortable="true">創建日期</th>
                    </tr>
              </thead>
              
    <script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="/static/js//bootstrap-table.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>

    <!-- Latest compiled and minified Locales -->
    <script src="/static/js/bootstrap-table-zh-CN.min.js"></script>              

django-url路由匹配：

在url里面寫的

urlpatterns = [
    url(r'asset_show_table',views.show_asset_in_table,name='show_asset_in_table'),  # 展示資產信息在bootstrap-table里面
    ]

djang-views的代碼

這段代碼是views里面的，里面的limit,offset，search，sort_column,order都是bootstrap-table插件在請求數據的時候會加上的，所以說我們需要在views里面去判斷是否有這些參數。

• limit 表示每頁有多少條記錄
• offset 表示總共有多少條記錄從數據庫里獲取的時候。
• search 搜索的關鍵字。
• sort_column 表示哪一列需要排序。
• order 表示排序是升序還是降序。

from django.db.models import Count,Sum

def get_ram_sum_size(asset_id):
    '''
    get the size of RAM and disk in total
    :param asset_id:  asset's id
    :return:   the size of RAM in total
    '''
    all_ram_slot = models.RAM.objects.filter(asset__id=asset_id)
    all_disk_slot = models.Disk.objects.filter(asset__id=asset_id)
    ram=0
    for slot in all_ram_slot:
        ram=ram+slot.capacity

    disk = 0
    for slot in all_disk_slot:
        disk = disk+slot.capacity
    return ram,disk


def show_asset_in_table(request):
    '''
    專門處理在服務器資產列表里面的表格信息的方法
    :param request: 
    :return: 
    '''
    if request.method == "GET":
        print(request.GET)
        limit = request.GET.get('limit')   # how many items per page
        offset = request.GET.get('offset')  # how many items in total in the DB
        search = request.GET.get('search')
        sort_column = request.GET.get('sort')   # which column need to sort
        order = request.GET.get('order')      # ascending or descending
        if search:    #    判斷是否有搜索字
            all_records = models.Asset.objects.filter(id=search,asset_type=search,business_unit=search,idc=search)
        else:
            all_records = models.Asset.objects.all()   # must be wirte the line code here

        if sort_column:   # 判斷是否有排序需求
            sort_column = sort_column.replace('asset_', '')    
            if sort_column in ['id','asset_type','sn','name','management_ip','manufactory','type']:   # 如果排序的列表在這些內容里面
                if order == 'desc':   # 如果排序是反向
                    sort_column = '-%s' % (sort_column)
                all_records = models.Asset.objects.all().order_by(sort_column)
            elif sort_column in ['salt_minion_id','os_release',]:
                # server__ 表示asset下的外鍵關聯的表server下面的os_release或者其他的字段進行排序
                sort_column = "server__%s" % (sort_column)
                if order == 'desc':
                    sort_column = '-%s'%(sort_column)
                all_records = models.Asset.objects.all().order_by(sort_column)
            elif sort_column in ['cpu_model','cpu_count','cpu_core_count']:
                sort_column = "cpu__%s" %(sort_column)
                if order == 'desc':
                    sort_column = '-%s'%(sort_column)
                all_records = models.Asset.objects.all().order_by(sort_column)
            elif sort_column in ['rams_size',]:
                if order == 'desc':
                    sort_column = '-rams_size'
                else:
                    sort_column = 'rams_size'
                all_records = models.Asset.objects.all().annotate(rams_size = Sum('ram__capacity')).order_by(sort_column)
            elif sort_column in ['localdisks_size',]:  # using variable of localdisks_size because there have a annotation below of this line
                if order == "desc":
                    sort_column = '-localdisks_size'
                else:
                    sort_column = 'localdisks_size'
                #     annotate 是注釋的功能,localdisks_size前端傳過來的是這個值，后端也必須這樣寫，Sum方法是django里面的，不是小寫的sum方法，
                # 兩者的區別需要注意，Sum（'disk__capacity‘）表示對disk表下面的capacity進行加法計算，返回一個總值.
                all_records = models.Asset.objects.all().annotate(localdisks_size=Sum('disk__capacity')).order_by(sort_column)   

            elif sort_column in ['idc',]:
                sort_column = "idc__%s" % (sort_column)
                if order == 'desc':
                    sort_column = '-%s'%(sort_column)
                all_records = models.Asset.objects.all().order_by(sort_column)

            elif sort_column in ['trade_date','create_date']:
                if order == 'desc':
                    sort_column = '-%s'%sort_column
                all_records = models.Asset.objects.all().order_by(sort_column)


        all_records_count=all_records.count()

        if not offset:
            offset = 0
        if not limit:
            limit = 20    # 默認是每頁20行的內容，與前端默認行數一致
        pageinator = Paginator(all_records, limit)   # 開始做分頁

        page = int(int(offset) / int(limit) + 1)    
        response_data = {'total':all_records_count,'rows':[]}   # 必須帶有rows和total這2個key，total表示總頁數，rows表示每行的內容


        for asset in pageinator.page(page):    
            ram_disk = get_ram_sum_size(asset.id)    # 獲取磁盤和內存的大小
            # 下面這些asset_開頭的key，都是我們在前端定義好了的，前后端必須一致，前端才能接受到數據並且請求.
            response_data['rows'].append({
                "asset_id": '<a href="/asset/asset_list/%d" target="_blank">%d</a>' %(asset.id,asset.id),   
                "asset_sn" : asset.sn if asset.sn else "",
                "asset_business_unit": asset.business_unit if asset.business_unit else "",
                "asset_name": asset.name if asset.name else "",
                "asset_management_ip": asset.management_ip if asset.management_ip else "",
                "asset_manufactory": asset.manufactory.manufactory if hasattr(asset,'manufactory') else "",
                "asset_type": asset.asset_type if asset.asset_type else "",
                "asset_os_release": asset.server.os_release if hasattr(asset,'server') else "",
                "asset_salt_minion_id":asset.server.salt_minion_id if hasattr(asset,'server') else "",
                "asset_cpu_count":asset.cpu.cpu_count if hasattr(asset,'cpu') else "",
                "asset_cpu_core_count": asset.cpu.cpu_core_count  ,
                "asset_cpu_model": asset.cpu.cpu_model if hasattr(asset,'cpu') else "",
                "asset_rams_size": ram_disk[0] if ram_disk[0] else "",
                "asset_localdisks_size" : ram_disk[1] if ram_disk[1] else "",
                "asset_admin": asset.admin.username if asset.admin else "",
                "asset_idc": asset.idc if asset.idc else "",
                "asset_trade_date": asset.trade_date.strftime('%Y-%m-%d %H:%M') if asset.trade_date else "",
                "asset_create_date" : asset.create_date.strftime("%Y-%m-%d %H:%M") if asset.create_date else "",
                "update_date": asset.update_date.strftime("%Y-%m-%d %H:%M") if  asset.update_date else "",
            })
            
        return  HttpResponse(json.dumps(response_data))    # 需要json處理下數據格式   

需要注意的就是后端返回的數據要json格式的，且是字典的，帶有total,rows這兩個key，total表示總頁數，rows是每一行的記錄，每一行的記錄必須是以asset_開頭，因為前端我們是這樣定義的，所以前后端必須保持一致。