前端插件定制之表内容

关于这个也没啥可说的了，具体看程序吧！

views.py
from django.shortcuts import render,HttpResponse
from django.views import View
import json
from app01 import models

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=[
                {
                    'q':'hostname',
                    'title':'主机名',
                    'display':1,
                },
                {
                    'q': 'port',
                    'title':'端口',
                    'display':1,
                },
                {
                    'q': 'business_unit_id',
                    'title': '业务线ID',
                    'display': 1,
                },
                {
                    'q': 'business_unit__name',
                    'title': '业务线名称',
                    'display': 1,
                },
                {
                    'q': None,
                    'title': '操作',
                    'display': 1,
                },
            ]

            value_list=[]
            for item in table_config:
                if item['q']:        #如果q值不为空的情况下
                    value_list.append(item['q'])

            data_list=models.Server.objects.values(*value_list)  #取得value_list的那几列就有了
            print(data_list)
            #数据类型为QuerySet[{} {}]
            data_list=list(data_list)   #序列化

            response.data={        # 配置文件
                'table_config':table_config,    # 那么这个列表就传输到前端页面了
                'data_list':data_list,
            }
        except Exception as e:
            response.status=False        #  如果出错
            response.message=str(e)
        return HttpResponse(json.dumps(response.__dict__))  #把数据发送到前端的用户

class BusinessView(View):                   #  这个插件的增删改查全部是利用Ajax去做的

    def get(self,request,*args,**kwargs):

        return render(request,'business.html')


class BusinessJsonView(View):               #  前端利用Ajax把前端的数据发送到这里进行处理和发送

    def get(self,request,*args,**kwargs):
        response=BaseResponse()
        try:
            # 获取现实的列
            # 获取数据
            table_config=[
                {
                    'q':'id',
                    'title':'ID',
                    'display':1,
                },
                {
                    'q': 'name',
                    'title':'业务线名称',
                    'display':1,
                },

                {
                    'q': None,
                    'title': '操作',
                    'display': 1,
                },
            ]

            value_list=[]
            for item in table_config:
                if item['q']:        #如果q值不为空的情况下
                    value_list.append(item['q'])

            data_list=models.BusinessUnit.objects.values(*value_list)  #取得value_list的那几列就有了
            print(data_list)
            #数据类型为QuerySet[{} {}]
            data_list=list(data_list)   #序列化

            response.data={        # 配置文件
                'table_config':table_config,    # 那么这个列表就传输到前端页面了
                'data_list':data_list,
            }
        except Exception as e:
            response.status=False        #  如果出错
            response.message=str(e)
        return HttpResponse(json.dumps(response.__dict__))  #把数据发送到前端的用户

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)

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>
    <script src="/static/js/server-json.js"></script>
</head>
<body>
    <table border="1">
        <thead id="thead"></thead>
        <tbody id="tbody"></tbody>
    </table>

    <script>
        $(function () {
            $.linan('/server-json.html');       // 插件
            //把/server-json.html这个url传到js里面的url
        });

    </script>
</body>
</html>

business.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-1.12.4.js"></script>
    <script src="/static/js/server-json.js"></script>
</head>
<body>
    <table border="1">
        <thead id="thead"></thead>
        <tbody id="tbody"></tbody>
    </table>

    <script>
        $(function () {
            $.linan('/business-json.html');
            //把/server-json.html这个url传到js里面的url
        });

    </script>
</body>
</html>

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()),
    path('business.html', views.BusinessView.as_view()),
    path('business-json.html', views.BusinessJsonView.as_view()),
]
urlpatterns += staticfiles_urlpatterns()

server-json.js

(function (jq) {

    var requestURL;

    function init() {
            //获取现实的列
            //获取数据
            $.ajax({
                url:requestURL,     // jq.extend里的url
                type:'GET',
                dataType:'JSON',
                success:function (arg) {
                    if(arg.status){
                        //创建表格标题
                        createTablehead(arg.data.table_config);         // 后台的response.data里的table_config
                        createTablebody(arg.data.table_config,arg.data.data_list);         // 后台的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标签里
        }

        function createTablebody(tableConfig,dataList){
            $.each(dataList,function (k1,row) {
                //k1为索引 [{'port': 11, 'hostname': 'c1.com'}, {'port': 23, 'hostname': 'c2.com'}] 中的0,1,2 ，
                // row 代指每一行的数据
                var tr=document.createElement('tr');


                $.each(tableConfig,function (k2,configItem) {
                    var td=document.createElement('td');
                    td.innerHTML=row[configItem.q];
                    $(tr).append(td);
                });

                $('#tbody').append(tr);
            })

        }

        jq.extend({
            'linan':function (url) {    //接收前端传过来的/server-json.html这个url
                requestURL=url;          //将url赋值给requestURL
                init();                  //执行init()
            }
        })

})(jQuery);

前端演示