CMDB 後臺管理之定製界面顯示（jquery、ajax）

時間 2020-05-06

標籤 cmdb 後臺管理定製界面顯示 jquery ajax 欄目 JQuery 简体版

原文原文鏈接

需求分析與功能實現

一、界面展現數據定製化的，經過在服務端views.py中配置 table_config 來自定義要展現的數據css

二、採用jQuery ajax 異步數據請求、處理、展現html

三、請求數據的定製化展現，增長刪除、編輯等操做項jquery

四、jQuery ajax 封裝成通用的 js 框架，展現不一樣數據傳入url 參數便可ajax

五、有些數據只查詢不展現（id），有些數據例如device_type_id(設備類型id) 不展現，只展現其對應的設備類型。json

views.py 服務數據展現

class JsonCustomEncoder(json.JSONEncoder): def default(self, value): if isinstance(value, datetime): return value.strftime('%Y-%m-%d %H:%M:%S') elif isinstance(value, date): return value.strftime('%Y-%m-%d') else: return json.JSONEncoder.default(self, value) # Create your views here.

def curd(request): # v = models.Server.objects.all()
    return render(request, 'curd.html') def curd_json(request): table_config = [ { 'q': 'id', 'title': 'ID', 'display': False, 'text': { 'tpl': "{n1}", 'kwargs': {'n1': '@id'} } }, { 'q': 'hostname', 'title': '主機名', 'display': True, 'text': { 'tpl': "{n1}-{n2}", 'kwargs': {'n1': '@hostname', 'n2': '@id'} } }, # 頁面顯示：標題：操做；刪除，編輯：a標籤
 { 'q': None, 'title': '操做', 'display': True, 'text': { 'tpl': "<a href='/del?nid={nid}'>刪除</a>", 'kwargs': {'nid': '@id'} } }, ] # 普通值：原值存放便可
    # @值 ： 根據id，根據獲取當前行對應數據
    values_list = [] for row in table_config: if not row['q']: continue values_list.append(row['q']) server_list = models.Server.objects.values(*values_list) ret = { 'server_list': list(server_list), 'table_config': table_config } return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder))

View Code

views.py 資產數據展現

def asset(request): # v = models.Server.objects.all()
    return render(request, 'asset.html') def asset_json(request): table_config = [ { 'q': 'id', 'title': 'ID', 'display': False,       #False 時只查詢數據不顯示在頁面
            'text': { 'tpl': "{n1}", 'kwargs': {'n1': '@id'} } }, { 'q': 'device_type_id',    #經過設備類型id 在字典 device_type_choices中找到對應設備類型
            'title': '資產類型', 'display': True, 'text': { 'tpl': "{n1}", 'kwargs': {'n1': '@@device_type_choices'}       #經過資產類型的id 查詢資產類型
 } }, { 'q': 'device_status_id', 'title': '狀態', 'display': True, 'text': { 'tpl': "{n1}", 'kwargs': {'n1': '@@device_status_choices'}     #經過資產狀態id 查詢資產狀態
 } }, { 'q': 'cabinet_num', 'title': '機櫃號', 'display': True, 'text': { 'tpl': "{n1}", 'kwargs': {'n1': '@cabinet_num'} } }, { 'q': 'idc__name', 'title': '機房', 'display': True, 'text': { 'tpl': "{n1}", 'kwargs': {'n1': '@idc__name'} } }, # 頁面顯示：標題：操做；刪除，編輯：a標籤
 { 'q': None, 'title': '操做', 'display': True, 'text': { 'tpl': "<a href='/del?nid={nid}'>刪除</a>", 'kwargs': {'nid': '@id'}                        #經過資產id 對資產進行刪除等操做
 } }, ] # 普通值：原值存放便可
    # @值 ： 根據id，根據獲取當前行對應數據
    values_list = [] for row in table_config: if not row['q']: continue values_list.append(row['q']) server_list = models.Asset.objects.values(*values_list) ret = { 'server_list': list(server_list), 'table_config': table_config, 'global_dict':{ 'device_type_choices': models.Asset.device_type_choices, 'device_status_choices': models.Asset.device_status_choices } } return HttpResponse(json.dumps(ret, cls=JsonCustomEncoder))

View Code

asset.html 頁面代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
</head>
<body>
    <div style="width: 700px;margin: 0 auto">
        <h1>資產列表</h1>
        <table class="table table-bordered table-striped">
            <thead id="tbHead">
                <tr> {# 標籤中的數據都是經過ajax 的dom 操做動態建立插入的#} </tr>
            </thead>
            <tbody id="tbBody">
            </tbody>
        </table>
    </div>

    <script src="/static/jquery-1.12.4.js"></script>
    <script src="/static/nb-list.js"></script>
    <script> $.xx('/backend/asset_json.html'); //xx爲封裝在nb-list.js 中的功能
    </script>
</body>
</html>

View Code

封裝的js 代碼nb-list.js

/** * Created by Administrator on 2017/8/2. */ (function (jq) { var GLOBAL_DICT = {}; /* { 'device_type_choices': ( (1, '服務器'), (2, '交換機'), (3, '防火牆'), ) 'device_status_choices': ( (1, '上架'), (2, '在線'), (3, '離線'), (4, '下架'), ) } */

    // 爲字符串建立format方法，用於字符串格式化
    String.prototype.format = function (args) { return this.replace(/\{(\w+)\}/g, function (s, i) { return args[i]; }); }; function initial(url) { $.ajax({ url: url, type: 'GET',  // 獲取數據
            dataType: 'JSON', success: function (arg) { $.each(arg.global_dict, function (k, v) { GLOBAL_DICT[k] = v                 //爲了方便調用把global_dic賦值到全局變量GLOBAL_DICT
 }); /* { 'server_list':list(server_list), # 全部數據 'table_config':table_config # 全部配置 'global_dict':{ 'device_type_choices': ( (1, '服務器'), (2, '交換機'), (3, '防火牆'), ) 'device_status_choices': ( (1, '上架'), (2, '在線'), (3, '離線'), (4, '下架'), ) } } */ initTableHeader(arg.table_config); initTableBody(arg.server_list, arg.table_config); } }) } function initTableHeader(tableConfig) { /* [ {'q':'id','title':'ID'}, {'q':'hostname','title':'主機名'}, ] */ $.each(tableConfig, function (k, v) { if (v.display) {                //display 爲true 時寫入標籤
                var tag = document.createElement('th'); tag.innerHTML = v.title; $('#tbHead').find('tr').append(tag); } }) } function initTableBody(serverList, tableConfig) { /* serverList = [ {'id': 1, 'hostname':c2.com, create_at: xxxx-xx-xx-}, {'id': 1, 'hostname':c2.com, create_at: xxxx-xx-xx-}, {'id': 1, 'hostname':c2.com, create_at: xxxx-xx-xx-}, {'id': 1, 'hostname':c2.com, create_at: xxxx-xx-xx-}, ] */ $.each(serverList, function (k, row) { // row: {'id': 1, 'hostname':c2.com, create_at: xxxx-xx-xx-}
            /* <tr> <td>id</td> <td>hostn</td> <td>create</td> </tr> */
            var tr = document.createElement('tr'); $.each(tableConfig, function (kk, rrow) { // kk: 1 rrow:{'q':'id','title':'ID'}, // rrow.q = "id"
                // kk: . rrow:{'q':'hostname','title':'主機名'},// rrow.q = "hostname"
                // kk: . rrow:{'q':'create_at','title':'建立時間'}, // rrow.q = "create_at"
                if (rrow.display) { var td = document.createElement('td'); /* if(rrow['q']){ td.innerHTML = row[rrow.q]; }else{ td.innerHTML = rrow.text; }*/
                    // rrow['q']
                    // rrow['text']
                    // rrow.text.tpl = "asdf{n1}sdf"
                    // rrow.text.kwargs = {'n1':'@id','n2':'@@123'}
                    var newKwargs = {}; // {'n1':'1','n2':'123'}
                    $.each(rrow.text.kwargs, function (kkk, vvv) { var av = vvv; if (vvv.substring(0, 2) == '@@') { var global_dict_key = vvv.substring(2, vvv.length);//獲得設備狀態device_type_choices或device_status_choices
                            var nid = row[rrow.q];                             //先查出設備狀態id或設備類型id
                            console.log(nid, global_dict_key); // 1 "device_type_choices"
                            /* device_type_choices = ( (1, '服務器'), (2, '交換機'), (3, '防火牆'), ) device_status_choices = ( (1, '上架'), (2, '在線'), (3, '離線'), (4, '下架'), ) */ $.each(GLOBAL_DICT[global_dict_key], function (gk, gv) { if (gv[0] == nid) { av = gv[1]; } }) } else if (vvv[0] == '@') { av = row[vvv.substring(1, vvv.length)]; } newKwargs[kkk] = av; }); var newText = rrow.text.tpl.format(newKwargs); td.innerHTML = newText; $(tr).append(td); } }); $('#tbBody').append(tr); }) } jq.extend({ xx: function (url) { initial(url); } }) })(jQuery);