什么是插件？

　　插件只是辅助，是开发过程中的一个阶段。一般项目一期会用各种插件，迅速将功能、界面搭出来，二期时就改成自己的代码了。大点的公司都有自己的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. 【vue】index.html main.js app.vue index.js怎么结合的？ 怎么打包的？搜集的信息

    转载:https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的: 一.启动项目 第一步:cmd进入项目文件里,运行npm ...

  2. chrome调试selenium。其实我是无聊了

    from selenium import webdriverdriver = webdriver.Chrome()driver.get("http://www.baidu.com" ...

  3. windows上配置连接git

    Windows7上安装Git   我首先是百度到了这个网站:https://git-scm.com/download/win 这个网站上有下载链接,你可以根据你的系统选择不同的下载链接,我的是Win7 ...

  4. css基于文件格式使用不同的样式

    a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center ri ...

  5. C++解析(9)：关于const和引用的疑问

    0.目录 1.关于const的疑问 2.关于引用的疑问 2.1 引用与指针 2.2 从C++语言与C++编译器角度看引用 2.3 从工程项目开发看引用 3.小结 1.关于const的疑问 const什 ...

  6. [CQOI2013]新Nim游戏 线性基

    题面 题面 题解 首先我们知道nim游戏先手必败当且仅当所有石堆异或和为0,因此我们的目标就是要使对手拿石堆的时候,无论如何都不能使剩下的石堆异或和为0. 对于一个局面,如果我们可以选取一些可以凑出0 ...

  7. 关于监听与控制设备旋转全解析（UIDeviceOrientationDidChangeNotification）

    一类情况: 初始化app的方向,比如只支持横屏或者竖屏.下面举例只支持竖屏的案例 在app的属性里面手动设置 上面标注了该app支持的方向种类,要是在app里支持Portrait方向,还需要添加以下代 ...

  8. 【WebAPI】新手入门WebAPI

    一.前言       工作也有一年多了,从进入公司就一直进行BIM(建筑信息模型)C/S产品的研发,平时写的最多的就是Dev WPF.一个偶然的时机,产品需要做支付宝扫码与微信扫码,所以需要了解产品服 ...

  9. （转）Xsl 的Webshell（aspx）版本

    关于使用xsl的webshell以前已经有人发过了,比如aspx的一个webshell如下: <%@ Page Language="C#" Debug="true& ...

  10. sysbench - 单组件式测试工具

    1 安装 > ./configure --with-mysql-includes=/usr/local/mysql/include --with-mysql-libs=/usr/local/my ...