Django之前端插件定制之表头

什么是插件？

　　插件只是辅助，是开发过程中的一个阶段。一般项目一期会用各种插件，迅速将功能、界面搭出来，二期时就改成自己的代码了。大点的公司都有自己的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>

那么，现在看一下前端界面的显示结果吧！

那么，关于前端插件定制之表头就已经完成了！

Django之前端插件定制之表头

猜你喜欢