什么是插件？
插件只是辅助，是开发过程中的一个阶段。一般项目一期会用各种插件，迅速将功能、界面搭出来，二期时就改成自己的代码了。大点的公司都有自己的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>
那么，现在看一下前端界面的显示结果吧！
那么，关于前端插件定制之表头就已经完成了！
原文地址：https://www.cnblogs.com/zhuifeng-mayi/p/9184438.html
时间： 2024-11-10 07:10:30