什么是插件？
插件只是辅助，是开发过程中的一个阶段。一般项目一期会用各种插件，迅速将功能、界面搭出来，二期时就改成自己的代码了。大点的公司都有自己的js库，自己开发类似jquery的库。
那接下来就写一下关于前端表头的插件
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()), ] urlpatterns += staticfiles_urlpatterns()
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)
views.py from django.shortcuts import render,HttpResponse from django.views import View import json 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=[ { 'title':'主机名', 'display':1, }, { 'title':'端口', 'display':1, }, ] response.data={ # 配置文件 'table_config':table_config, # 那么这个列表就传输到前端页面了 } except Exception as e: response.status=False # 如果出错 response.message=str(e) return HttpResponse(json.dumps(response.__dict__)) #把数据发送到前端的用户
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> </head> <body> <table border="1"> <thead id="thead"></thead> <tbody id="tbody"></tbody> </table> <script> $(function () { init(); }); function init() { //获取现实的列 //获取数据 $.ajax({ url:'server-json.html', type:'GET', dataType:'JSON', success:function (arg) { if(arg.status){ //创建表格标题 createTablehead(arg.data.table_config); // 后台的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标签里 } </script> </body> </html>
那么，现在看一下前端界面的显示结果吧！
那么，关于前端插件定制之表头就已经完成了！