什么是插件？

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

    1.JDK安装 a.卸载JDK (1)卸载默认的JDK 用root用户登陆到系统,打开一个终端输入 # rpm -qa|grep gcj 显示内容其中包含下面两行信息 # java-1.4.2-gcj ...

  2. c语言----程序记录

    1.结构体写入文件,读取 #include <stdio.h> #include <string.h> #include <stdlib.h> #define ma ...

  3. SQL中的逻辑运算符

    逻辑运算符和比较运算符一样,都是返回 true 或 false 值得布尔数据类型.   运算符 行为 ALL 如果一个比较集中全部都是 true ,则值为 true AND 如果两个布尔值表达式均为 ...

  4. 什么是P问题，NP问题和NPC问题

    转载自:Matrix67的博客 什么是P问题.NP问题和NPC问题 这或许是众多OIer最大的误区之一.    你会经常看到网上出现“这怎么做,这不是NP问题吗”.“这个只有搜了,这已经被证明是NP问 ...

  5. 【刷题】洛谷 P3808 【模板】AC自动机（简单版）

    题目背景 这是一道简单的AC自动机模板题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 管理员提示:本题数据内有重复的单词,且重复单词应该计算多次, ...

  6. elasticsearch 第三篇(安装篇)

    *nux下安装 在*nux下,es官方已提供编译的deb和rpm包,但是需要保证已安装安装Java虚拟环境(目前es1.6和1.7版本均可选择1.8版本java),安装步骤如下:1.下载ES deb/ ...

  7. 【BZOJ1088】扫雷（递推）

    [BZOJ1088]扫雷(递推) 题面 BZOJ 题解 忽然发现这就是一道逗逼题. 只需要枚举一下第一个是什么,后面都能够推出来了.. #include<iostream> using n ...

  8. S-T平面图

    给定一个平面图和一个源点S.汇点T都在图中无边界的区域上,这样的图叫S-T平面图 我们把图中每一个独立的面看做一个点,对于每条边e,将它两侧的面连一条边,其中靠近S的一段与S相连,与T相连的一段与T相 ...

  9. POJ--3461

    原题链接:http://poj.org/problem?id=3461 分析:求一个串在另一个串中出现的次数,显然用KMP可以解决. #include<cstdio> #include&l ...

  10. Square Country

    原题链接:http://acm.timus.ru/problem.aspx?space=1&num=1073 分析:dp,dp[i]表示钱为i且恰好用完时能买的最少土地数,易知dp[i]=mi ...