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="">

        <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之前端插件定制之表头

最新文章

热门文章