什么是插件？

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

    百度的面试官问:Web容器,Servlet容器,SpringMVC容器的区别: 我还写了个文章,说明web容器与servlet容器的联系,参考:servlet单实例多线程模式 这个文章有web容器与s ...

  2. 修改gcc/g++默认include路径

    修改gcc/g++默认include路径 转自:http://www.network-theory.co.uk/docs/gccintro/gccintro_23.htmlhttp://ilewen. ...

  3. QString::QString 中文乱码

    QString::QString 中文乱码 处理方法: 1. QString str = QString::fromLocal8Bit("中文"); // vs2008 vs200 ...

  4. Linux实用命令行

    对于Linux命令,我在学习和使用过程中是有一个循序渐进的过程的.适合小白学习快速使用.大笑 跳转目录:cd +路径 例如:cd /home/workspace 查看某个文件,常用的是查看日志:tai ...

  5. 【Socket】从零打造基于Socket在线升级模块

    一.前言       前段时间一直在折腾基于Socket的产品在线升级模块.之前我曾写过基于.Net Remoting的.基于WCF的在线升级功能,由于并发量较小及当时代码经验的不足一直没有实际应用. ...

  6. VK Cup 2017 Round 3 + Codeforces Round #412

    A 读题题 B 就是你排名第p,得了x分,而最终至少需要y分,你需要最少的successful hack,使得最终得分s>=y,且由s随机取25个数,使p被选中. (1)暴力枚举hack成功几次 ...

  7. OpenCV C++如何使RGB图像变为灰度图像

    http://m.blog.csdn.net/blog/u014395105/41308979 最近在研究如何用C++来处理图像,而不使用封装好的OpenCV代码,这样能够更好的了解OpenCV的内部 ...

  8. (转)iOS开发——来改掉那些被禁用的方法吧（持续更新中）

    iOS平台在快速的发展,各种接口正在不断的更新.随着iOS9的发布,又有一批老方法不推荐使用了,你若调用这些方法,运行的结果是没有问题的,但是会出现警告“***is deprecated :first ...

  9. HDU--2962

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=2962 分析:最短路+二分. #include<iostream> #include< ...

  10. libiop网络库数据结构和基础知识

    最近朋友推荐,学习了libiop这个网络库,作者封装的很全面,代码很简洁 适合初学者学习基于事件驱动的网络io 先看看iop_def.h, 这里面定义了常用的数据结构 tag_iop_base_t 主 ...