什么是插件？

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

  1. Django使用DataTables插件总结

    Django使用Datatables插件总结 文章中的例子已上传至github 基本使用 Datatables插件是一款方便简单的展示数据的列表插件.关于基本使用,官方网站上的已介绍的很详细,这里我再 ...

  2. django form 组件插件

    创建类: class RegForms(forms.Form): account = fields.CharField( required = True, #必填字段 max_length=12, m ...

  3. 前端插件之Datatables使用--下篇

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了Datatables插件的基本使用,这一篇文章作为上一篇的延续,会介绍Databases的一些高级 ...

  4. 前端插件@user

    分享一个 @user 前端插件   开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是 ...

  5. django admin后台插件：django-suit入门

    去年9月底开始用django来做公司内部项目,开始对django有了一些了解,感觉django真的蛮强大的(也有很多人推荐flask,将来有空的话我会试试).今天的话只是介绍一个小东西,django管 ...

  6. 前端插件之Bootstrap Dual Listbox使用

    工欲善其事,必先利其器 对于很多非专业前端开发来说写页面是非常痛苦的,借助框架或插件往往能够达到事半功倍的效果,本系列文章会介绍我在运维系统开发过程中用到的那些顺手的前端插件,如果你是想写XX管理系统 ...

  7. 前端插件之Select2使用

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,上一篇文章介绍了bootstrap-duallistbox这个插件的使用,这一篇开始Select2的征服之旅 Se ...

  8. 前端插件之Datatables使用--上篇

    工欲善其事,必先利其器 本系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,前边两篇分别介绍了Duallistbox插件和Select2插件的使用,这一篇开始Databases的征服之旅 D ...

  9. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

随机推荐

  1. CodeForces Round #527 (Div3) D1. Great Vova Wall (Version 1)

    http://codeforces.com/contest/1092/problem/D1 Vova's family is building the Great Vova Wall (named b ...

  2. RPC和WebService的区别

    最近分析的这个系统,逻辑架构中有一层是RPC interface.之前对RPC不熟悉,就上网搜索了一下资料,在此总结一下: RPC是Remote Procedure Calling,远程过程调用的缩写 ...

  3. spring cloud & dubbo

    区别 来源(背景): Dubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿里巴巴集团的各成员站点. Spring Cloud,从命名我们就可以知道,它是Spring Source的产物,Spr ...

  4. 【.Net】Net开发

    博客里的好多文章都是本人看着比较好,就转过来的,好少自己亲自去写点什么,也很少把自己学的一点心得于大家分享,今天特别想聊一下,关于本人做Net开发时的那段回忆! 一.关于知识的回忆 还记得Handle ...

  5. bzoj1007-水平可见直线

    题目 在平面直角坐标系上以\(y=kx+b\)的形式给出\(n (n\le 50000)\)条直线,求从无限高的地方能看到多少条直线. 分析 举几个例子发现我们要求的直线组成一个下凸的形状.所以我们只 ...

  6. What Is The Promiscuous Mode

    What Is The Promiscuous Mode? Some Network Interface Cards (NICs) may not allow network traffic afte ...

  7. 【转】NHibernate主键类型介绍

    转自:http://blog.163.com/wzx_dd/blog/static/1942850722012828934553/ 最近整合了一下框架,用SSH搭建了一个框架,但是在整合好之后,启动t ...

  8. 【刷题】洛谷 P4716 【模板】最小树形图

    题目背景 这是一道模板题. 题目描述 给定包含 \(n\) 个结点, \(m\) 条有向边的一个图.试求一棵以结点 \(r\) 为根的最小树形图,并输出最小树形图每条边的权值之和,如果没有以 \(r\ ...

  9. 浅谈FFT&NTT

    复数及单位根 复数的定义大概就是:\(i^2=-1\),其中\(i\)就是虚数单位. 那么,在复数意义下,对于方程: \[ x^n=1 \] 就必定有\(n\)个解,这\(n\)个解的分布一定是在复平 ...

  10. 【CF625E】Frog Fights（模拟）

    [CF625E]Frog Fights(模拟) 题面 CF 洛谷 翻译: 有\(n\)只青蛙在一个被分为了\(m\)等分的圆上,对于每份顺时针依次标号. 初始时每只青蛙所在的位置是\(p_i\),速度 ...