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

<button type='button' id='user_list'>用戶列表</button>

2、點(diǎn)擊這個(gè)按鈕觸發(fā)之后，會彈出一個(gè)對話框并請求view，從數(shù)據(jù)庫中得到數(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 lay-filter='user_table'></table></div>’, success: function () { table.render({elem: ’#user_table’,id: ’user_table’,height: 480,method: ’post’, //接口http請求類型，默認(rèn)：geturl: ’{% url ’user:user_list’ %}’,request: { pageName: ’page’, //頁碼的參數(shù)名稱，默認(rèn)：page limitName: ’limit’, //每頁數(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, //是否分頁limit: 10, //每頁顯示的條數(shù)limits: [10, 20, 30], //每頁條數(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、接著，所請求的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 UserInfofrom django.http import JsonResponsefrom 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）、通過查詢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）其中通過ajax請求時(shí)，可能會有csrf跨域的限制，因?yàn)槲覀儧]有構(gòu)造一個(gè)表單，并在表單底下加個(gè) {% csrf_token %} ，導(dǎo)致請求不過去，所以要加個(gè)@csrf_exempt注解方式來解決。

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

第一步 ：

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

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

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

視圖函數(shù)views.py

import jsondef response_data(request): dates=AssetInfo.objects.all()#自行創(chuàng)建測試數(shù)據(jù)。 dataCount = dates.count()#數(shù)據(jù)總數(shù) lis=[] for i in dates: dict={} dict[’jobname’]=i.jobname#與前端一一對應(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’) #前臺傳的值， pageSize = request.GET.get(’limit’) #前臺傳的值 pageInator = Paginator(lis, pageSize)#導(dǎo)入分頁模塊分頁操作，不寫前端只展示一頁數(shù)據(jù)， contacts = pageInator.page(pageIndex)#導(dǎo)入分頁模塊分頁操作，不寫前端只展示一頁數(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í)間字段問題可直接返回此代碼。有就返回下面代碼 return HttpResponse(json.dumps(Result, cls=DateEncoder), content_type='application/json')#解決時(shí)間字段json問題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='http://www.4tl426be.cn/static/layui-v2.5.5/layui/css/layui.css' rel='external nofollow' media='all'> <!-- 注意：如果你直接復(fù)制所有代碼到本地，上述css路徑需要改成你本地的 --></head><body><table id='test'></table><script src='https://rkxy.com.cn/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>

效果圖

以上這篇django Layui界面點(diǎn)擊彈出對話框并請求邏輯生成分頁的動(dòng)態(tài)表格實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。