zoukankan      html  css  js  c++  java
  • 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_开头,因为前端我们是这样定义的,所以前后端必须保持一致。

  • 相关阅读:
    hdu 3854 Glorious Array(一般)
    sublime常用设置以及使用技巧
    windows下通过bat脚本调用sql脚本
    数据库操作之间的校验以及常见操作
    oracle linux、centos、redhat7配置网易云的yum源
    redhat,centos、oracle linux配置本地yum源
    查询触发器及其相关的触发器函数与表
    postgresql触发器
    root用户ssh可以登录,xftp通过sftp不能登录链接CentOS解决办法
    PG数据库中表所占用空间大小查询
  • 原文地址:https://www.cnblogs.com/liaojiafa/p/6474181.html
Copyright © 2011-2022 走看看