快捷導(dǎo)航

django Layui界面點(diǎn)擊彈出對(duì)話框并請(qǐng)求邏輯生成分頁(yè)的動(dòng)態(tài)表格實(shí)例

更新時(shí)間：2020年05月12日 16:20:46 作者：煢夜

這篇文章主要介紹了django Layui界面點(diǎn)擊彈出對(duì)話框并請(qǐng)求邏輯生成分頁(yè)的動(dòng)態(tài)表格實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1、首先，界面上有個(gè)按鈕觸發(fā)操作：

<button type="button" class="layui-btn layui-btn-normal" id="user_list">用戶列表</button>

2、點(diǎn)擊這個(gè)按鈕觸發(fā)之后，會(huì)彈出一個(gè)對(duì)話框并請(qǐng)求view，從數(shù)據(jù)庫(kù)中得到數(shù)據(jù)并產(chǎn)生動(dòng)態(tài)表格，

其中script代碼如下：

<script>
 layui.use(['table'],
  function () {
   var table = layui.table
 
   $("#user_list").click(function(){
    layer.open({
      type: 1,
      title: '用戶信息',
      area: ['800px', '600px'], //寬高
      content: '<div class="layui-card-header"><div class="layui-form-text">用戶信息列表</div>' +
      '</div><div class="layui-form-item">' +
      '<table id="user_table" lay-filter="user_table"></table></div>',
      success: function () {
       table.render({
        elem: '#user_table',
        id: 'user_table',
        height: 480,
        method: 'post', //接口http請(qǐng)求類型，默認(rèn)：get
        url: '{% url 'user:user_list' %}',
        request: {
         pageName: 'page', //頁(yè)碼的參數(shù)名稱，默認(rèn)：page
         limitName: 'limit', //每頁(yè)數(shù)據(jù)量的參數(shù)名，默認(rèn)：limit
        },
        response: {
         statusName: 'code', //規(guī)定數(shù)據(jù)狀態(tài)的字段名稱，默認(rèn)：code
         statusCode: 0, //規(guī)定成功的狀態(tài)碼，默認(rèn)：0
         msgName: 'msg', //規(guī)定狀態(tài)信息的字段名稱，默認(rèn)：msg
         countName: 'count', //規(guī)定數(shù)據(jù)總數(shù)的字段名稱，默認(rèn)：count
         dataName: 'data', //規(guī)定數(shù)據(jù)列表的字段名稱，默認(rèn)：data
        },
        page: true, //是否分頁(yè)
        limit: 10, //每頁(yè)顯示的條數(shù)
        limits: [10, 20, 30], //每頁(yè)條數(shù)的選擇項(xiàng)，默認(rèn)：[10,20,30,40,50,60,70,80,90]。
        cols: [
         [
          {
           field: 'username', //字段名
           title: '用戶名', //標(biāo)題
           width: 150,
           sort: true, //是否允許排序 默認(rèn)：false
           fixed: 'left' //固定列
          }, {
          field: 'sex', //字段名
          title: '性別', //標(biāo)題
          width: 100,
          sort: true //是否允許排序 默認(rèn)：false
          //fixed: 'left' //固定列
         }, {
          field: 'age', //字段名
          title: '年齡', //標(biāo)題
          width: 100,
          sort: true //是否允許排序 默認(rèn)：false
          //fixed: 'left' //固定列
         }, {
          field: 'mobile', //字段名
          title: '手機(jī)', //標(biāo)題
          width: 100,
          sort: true //是否允許排序 默認(rèn)：false
          //fixed: 'left' //固定列
         }, {
          field: 'address', //字段名
          title: '地址', //標(biāo)題
          width: 150,
          sort: true //是否允許排序 默認(rèn)：false
          //fixed: 'left' //固定列
         },{
          field: '', //字段名
          title: '操作', //標(biāo)題
          toolbar: '#bar'
         }
         ]
        ],
       });
      },
      cancel: function () {
       layer.closeAll();
      }
     })
   });
  });
 
</script>
 
<script type="text/html" id="bar">
 <button class="layui-btn layui-btn-normal">查看</button>
 <button class="layui-btn layui-btn-normal">編輯</button>
</script>

3、接著，所請(qǐng)求的view的方法，即為上面定義的url屬性，{% url 'user:user_list' %}，其中url配置，以及邏輯實(shí)現(xiàn)代碼分別如下：

from django.urls import path
 
urlpatterns = [
 # 查詢用戶列表
 path('user_list/', UserQuery.as_view(), name="user_list"),
]

from apps.user.models.user_model import UserInfo
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
 
class UserQuery(View):
 """
 用戶信息查詢
 """
 def post(self, request):
  user_list = UserInfo.objects.objects.get_queryset().order_by('id')
  data = dict()
  data_items = []
  for item in user_list :
   user_dict = {"username": item.username, "age": item.age, "sex": item.sex, "mobile": item.mobile,
       "address": item.address}
   data_items.append(user_dict )
  data.__setitem__("data", data_items)
  data.__setitem__("code", 0)
  data.__setitem__("msg", "")
  data.__setitem__("count", len(field_list))
  return JsonResponse(data)
 
 @csrf_exempt
 def dispatch(self, *args, **kwargs):
  return super(UserQuery, self).dispatch(*args, **kwargs)

注：

（1）、通過(guò)查詢UserInfo model底下的數(shù)據(jù)，然后分別循環(huán)這個(gè)列表，把動(dòng)態(tài)表格所需要顯示的值，填充到一個(gè)字典底下，并追加進(jìn)列表當(dāng)中，最后再統(tǒng)一構(gòu)成一個(gè)字典data，把列表數(shù)據(jù)，狀態(tài)碼，返回信息，數(shù)量返回回去。

（2）其中通過(guò)ajax請(qǐng)求時(shí)，可能會(huì)有csrf跨域的限制，因?yàn)槲覀儧]有構(gòu)造一個(gè)表單，并在表單底下加個(gè) {% csrf_token %} ，導(dǎo)致請(qǐng)求不過(guò)去，所以要加個(gè)@csrf_exempt注解方式來(lái)解決。

補(bǔ)充知識(shí)：django數(shù)據(jù)接口與layUI框架數(shù)據(jù)表格結(jié)合：數(shù)據(jù)渲染和真實(shí)分頁(yè)

第一步：

通過(guò)查詢數(shù)據(jù)轉(zhuǎn)化為layui的數(shù)據(jù)接口模式

{“code”: 0, “msg”: “”, “count”:總數(shù), “data”: 查詢的數(shù)據(jù)}

自行定義訪問(wèn)路徑，當(dāng)url訪問(wèn) xxxx/tasks/data/ 路徑時(shí)：訪問(wèn)視圖response_data，將數(shù)據(jù)傳到前端，通過(guò)html可查看相關(guān)代碼

視圖函數(shù)views.py

import json
def response_data(request):
 dates=AssetInfo.objects.all()#自行創(chuàng)建測(cè)試數(shù)據(jù)。
 dataCount = dates.count()#數(shù)據(jù)總數(shù)
 lis=[]
 for i in dates:
  dict={}
  dict['jobname']=i.jobname#與前端一一對(duì)應(yīng)，自行設(shè)置要展示的字段
  dict['Departments'] = i.Departments.lm_unit#外鍵字段
  dict['groups'] = i.groups.variables_name#外鍵字段
  dict['email'] = i.email
  dict['status'] = i.status
  dict['taskNo'] = i.taskNo
  dict['create_time'] = i.create_time
  lis.append(dict)
 pageIndex = request.GET.get('page') #前臺(tái)傳的值，
 pageSize = request.GET.get('limit') #前臺(tái)傳的值
 pageInator = Paginator(lis, pageSize)#導(dǎo)入分頁(yè)模塊分頁(yè)操作，不寫前端只展示一頁(yè)數(shù)據(jù)，
 contacts = pageInator.page(pageIndex)#導(dǎo)入分頁(yè)模塊分頁(yè)操作，不寫前端只展示一頁(yè)數(shù)據(jù)，
 res=[]
 for i in contacts:
  res.append(i)
 print(res)
 Result = {"code": 0, "msg": "", "count":dataCount, "data": res}
 # json.dumps(Result, cls=DateEncoder)沒有時(shí)間字段問(wèn)題可直接返回此代碼。有就返回下面代碼
 return HttpResponse(json.dumps(Result, cls=DateEncoder), content_type="application/json")

#解決時(shí)間字段json問(wèn)題
class DateEncoder(json.JSONEncoder):
 def default(self, obj):
  if isinstance(obj,datetime.datetime):
   return obj.strftime("%Y-%m-%d %H:%M:%S")
  else:
   return json.JSONEncoder.default(self,obj)

html代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Layui</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="/static/layui-v2.5.5/layui/css/layui.css" rel="external nofollow" media="all">
 <!-- 注意：如果你直接復(fù)制所有代碼到本地，上述css路徑需要改成你本地的 -->
</head>
<body>

<table class="layui-hide" id="test"></table>

<script src="/static/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接復(fù)制所有代碼到本地，上述js路徑需要改成你本地的 -->

<script>
layui.use('table', function(){
 var table = layui.table;

 table.render({
 elem: '#test'
 ,url:'/tasks/data/'#數(shù)據(jù)接口
  ,page: true
  ,limit:5
  ,limits:[5,15,20]
 ,cols: [[
 {field: 'jobname', title: '任務(wù)名'}
   , {field: 'Departments', title: '部門'}
   , {field: 'groups', title: '配置'}
   , {field: 'email', title: '郵箱'}
   , {field: 'status', title: '狀態(tài)'}
   , {field: 'taskNo', title: '隊(duì)列狀態(tài)' }
   , {field: 'create_time', title: '創(chuàng)建時(shí)間'}
 ]]

 });
});
</script>

</body>
</html>

效果圖