需求分析与功能实现
1、界面展示数据定制化的，通过在服务端views.py中配置 table_config 来自定义要展示的数据
2、采用jQuery ajax 异步数据请求、处理、展示
3、请求数据的定制化展示，增加删除、编辑等操作项
4、jQuery ajax 封装成通用的 js 框架，展示不同数据传入url 参数即可
5、有些数据只查询不展示（id），有些数据例如device_type_id(设备类型id) 不展示，只展示其对应的设备类型。
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))
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))
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=" 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>
封装的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);