1. 程式人生 > 實用技巧 >djongo 前端頁面展示自定義api返回的列表資料,並拼接到table上

djongo 前端頁面展示自定義api返回的列表資料,並拼接到table上

前端頁面:

 1 {% extends 'base.html' %}
 2 {% load static %}
 3 {% load bootstrap3 %}
 4 {% load i18n %}
 5 {% load common_tags %}
 6 
 7 {% block content %}
 8 <div class="wrapper wrapper-content animated fadeInRight">
 9     <div class="row">
10         <div class="col-sm-12">
11             <
div class="ibox float-e-margins"> 12 <div class="panel-options"> 13 {% include 'settings/_setting_tabs.html' %} 14 </div> 15 16 <div class="tab-content"> 17 <div class="col-sm-12" style="padding-left:0"
> 18 <div class="ibox-content" style="border-width: 0;padding-top: 40px;"> 26 <table class="table table-striped table-bordered table-hover " id="license_list_table"> 27 <thead> 28 <
tr> 29 <th class="text-center">授權匯入時間</th> 30 <th class="text-center">授權檔案編號</th> 31 <th class="text-center">匯入前有效期至</th> 32 <th class="text-center">匯入後有效期至</th> 33 <th class="text-center">共計時長(/月)</th> 34 </tr> 35 </thead> 36 <tbody id="license_list_table_body"> 37 </table> 38 </div> 39 </div> 40 </div> 41 </div> 42 </div> 43 </div> 44 </div> 45 </div> 46 {% endblock %} 47 {% block custom_foot_js %} 48 <script src="{% static 'js/jquery.form.min.js' %}"></script> 49 <script> 50 $(document).ready(function () { 51 api_url = 'getLicenseList'; 52 $.ajax({ 53 method: 'GET', 54 url: api_url, 55 dataType: 'json', 56 success: function (data) { 57 if (data['status']=="ok") { 58 var results = data['data']; 59 for (i = 0; i < results.length; i++) { 60 $('#license_list_table_body').append( 61 ' <tr>\n' + 62 ' <th class="text-center">' + results[i]['importTime'] + '</th>\n' + 64 ' <th class="text-center">' + results[i]['before_deadline'] + '</th>\n' + 65 ' <th class="text-center">' + results[i]['after_deadline'] + '</th>\n' + 66 ' <th class="text-center">' + results[i]['total'] + '</th>\n' + 67 ' </tr>' 68 ) 69 } 70 } 71 } 72 }) 73 }) 74 </script> 75 {% endblock %}

其中,api_url的連線處:

view_urls.py

 1 from __future__ import absolute_import
 2 
 3 from django.conf.urls import url
 4 
 5 from .. import views
 6 
 7 app_name = 'common'
 8 
 9 urlpatterns = [
10     url(r'^$', views.BasicSettingView.as_view(), name='basic-setting'),17     url(r'^license/getLicenseList/$', views.LicenseListView.as_view(), name='list-license-setting'),
18    
19 ]

LicenseListView.py

class LicenseListView(View):
    def get(self, request):
        liscese_list = []
        license_dict = {}
        licenseDatail = LicenseDetail.objects.all()

        for tmp in licenseDatail:
            license_dict['importTime'] = ((str)(tmp.import_time)).split('+')[0]
            license_dict['before_deadline'] = ((str)(tmp.before_deadline)).split('+')[0]
            license_dict['after_deadline'] = ((str)(tmp.after_deadline)).split('+')[0]
            license_dict['total'] = tmp.time
            liscese_list.append(license_dict)

        result = {'status': 'ok', 'data': liscese_list}

        print(result)
        return JsonResponse(result, safe=False)

licensefile.py

 1 class LicenseDetail(models.Model):
 2     import_time = models.DateTimeField() 4     before_deadline = models.DateTimeField()
 5     after_deadline = models.DateTimeField()
 6     time = models.CharField(max_length=3)
 7     lic_config = models.CharField(max_length=10, default='')
 8 
 9     class Meta:
10         db_table = "settings_setting_license_detail"
11 
12     def __str__(self):
13         return "{},{},{},{},{}".format(self.import_time, self.before_deadline, self.after_deadline,
14                                           self.time, self.lic_config)

檔案說明:

因為這個列表是嵌在頁面中,也就是說這個和jongo的把整個頁面作為一個model的原型不匹配;

其中,這個頁面的跟路徑是license/,所以在view_urls.py中對應的程式碼中加了license/,