前端插件定制之表内容
关于这个也没啥可说的了，具体看程序吧！
views.py from django.shortcuts import render,HttpResponse from django.views import View import json from app01 import models class BaseResponse(object): # 封装数据 def __init__(self): self.status=True self.data= None self.message=None class ServerView(View): # 这个插件的增删改查全部是利用Ajax去做的 def get(self,request,*args,**kwargs): return render(request,'server.html') class ServerJsonView(View): # 前端利用Ajax把前端的数据发送到这里进行处理和发送 def get(self,request,*args,**kwargs): response=BaseResponse() try: # 获取现实的列 # 获取数据 table_config=[ { 'q':'hostname', 'title':'主机名', 'display':1, }, { 'q': 'port', 'title':'端口', 'display':1, }, { 'q': 'business_unit_id', 'title': '业务线ID', 'display': 1, }, { 'q': 'business_unit__name', 'title': '业务线名称', 'display': 1, }, { 'q': None, 'title': '操作', 'display': 1, }, ] value_list=[] for item in table_config: if item['q']: #如果q值不为空的情况下 value_list.append(item['q']) data_list=models.Server.objects.values(*value_list) #取得value_list的那几列就有了 print(data_list) #数据类型为QuerySet[{} {}] data_list=list(data_list) #序列化 response.data={ # 配置文件 'table_config':table_config, # 那么这个列表就传输到前端页面了 'data_list':data_list, } except Exception as e: response.status=False # 如果出错 response.message=str(e) return HttpResponse(json.dumps(response.__dict__)) #把数据发送到前端的用户 class BusinessView(View): # 这个插件的增删改查全部是利用Ajax去做的 def get(self,request,*args,**kwargs): return render(request,'business.html') class BusinessJsonView(View): # 前端利用Ajax把前端的数据发送到这里进行处理和发送 def get(self,request,*args,**kwargs): response=BaseResponse() try: # 获取现实的列 # 获取数据 table_config=[ { 'q':'id', 'title':'ID', 'display':1, }, { 'q': 'name', 'title':'业务线名称', 'display':1, }, { 'q': None, 'title': '操作', 'display': 1, }, ] value_list=[] for item in table_config: if item['q']: #如果q值不为空的情况下 value_list.append(item['q']) data_list=models.BusinessUnit.objects.values(*value_list) #取得value_list的那几列就有了 print(data_list) #数据类型为QuerySet[{} {}] data_list=list(data_list) #序列化 response.data={ # 配置文件 'table_config':table_config, # 那么这个列表就传输到前端页面了 'data_list':data_list, } except Exception as e: response.status=False # 如果出错 response.message=str(e) return HttpResponse(json.dumps(response.__dict__)) #把数据发送到前端的用户
models.py from django.db import models class UserInfo(models.Model): name=models.CharField(max_length=64) age=models.IntegerField() class BusinessUnit(models.Model): name=models.CharField(max_length=64) class Server(models.Model): server_type_choices=( (1,'Web'), (2,'存储'), (3,'缓存') ) server_type=models.IntegerField(choices=server_type_choices) hostname=models.CharField(max_length=64) port=models.IntegerField() business_unit=models.ForeignKey(to="BusinessUnit",to_field="id",on_delete=models.CASCADE) user=models.ForeignKey(to='UserInfo',to_field="id",on_delete=models.CASCADE)
server.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/js/jquery-1.12.4.js"></script> <script src="/static/js/server-json.js"></script> </head> <body> <table border="1"> <thead id="thead"></thead> <tbody id="tbody"></tbody> </table> <script> $(function () { $.linan('/server-json.html'); // 插件 //把/server-json.html这个url传到js里面的url }); </script> </body> </html>
business.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/js/jquery-1.12.4.js"></script> <script src="/static/js/server-json.js"></script> </head> <body> <table border="1"> <thead id="thead"></thead> <tbody id="tbody"></tbody> </table> <script> $(function () { $.linan('/business-json.html'); //把/server-json.html这个url传到js里面的url }); </script> </body> </html>
urls.py from django.contrib import admin from django.urls import path from app01 import views from django.contrib.staticfiles.urls import staticfiles_urlpatterns urlpatterns = [ path('admin/', admin.site.urls), #以前用FBV写，现在用CBV写 path('server.html', views.ServerView.as_view()), path('server-json.html', views.ServerJsonView.as_view()), path('business.html', views.BusinessView.as_view()), path('business-json.html', views.BusinessJsonView.as_view()), ] urlpatterns += staticfiles_urlpatterns()
server-json.js (function (jq) { var requestURL; function init() { //获取现实的列 //获取数据 $.ajax({ url:requestURL, // jq.extend里的url type:'GET', dataType:'JSON', success:function (arg) { if(arg.status){ //创建表格标题 createTablehead(arg.data.table_config); // 后台的response.data里的table_config createTablebody(arg.data.table_config,arg.data.data_list); // 后台的response.data里的table_config }else{ alert(arg.message) } } }) } var tr=document.createElement('tr'); // 创建个tr标签 function createTablehead(config) { //config=response.data.table_config $.each(config,function (k,v) { // $.each 为循环 对config循环 v代指字典 if(v.display){ // 若v.display == True 那么创建一个th var th=document.createElement('th'); // 创建th标签 th.innerHTML=v.title; // 把后台的table_config里的title放入到th标签内 $(tr).append(th); // 把th标签添加到tr标签里 } }); $('#thead').append(tr); // 把tr标签添加到thead标签里 } function createTablebody(tableConfig,dataList){ $.each(dataList,function (k1,row) { //k1为索引 [{'port': 11, 'hostname': 'c1.com'}, {'port': 23, 'hostname': 'c2.com'}] 中的0,1,2 ， // row 代指每一行的数据 var tr=document.createElement('tr'); $.each(tableConfig,function (k2,configItem) { var td=document.createElement('td'); td.innerHTML=row[configItem.q]; $(tr).append(td); }); $('#tbody').append(tr); }) } jq.extend({ 'linan':function (url) { //接收前端传过来的/server-json.html这个url requestURL=url; //将url赋值给requestURL init(); //执行init() } }) })(jQuery);
前端演示
