django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例


Posted in Python onMay 12, 2020

1、首先,界面上有个按钮触发操作:

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

2、点击这个按钮触发之后,会弹出一个对话框并请求view,从数据库中得到数据并产生动态表格,

其中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请求类型,默认:get
        url: '{% url 'user:user_list' %}',
        request: {
         pageName: 'page', //页码的参数名称,默认:page
         limitName: 'limit', //每页数据量的参数名,默认:limit
        },
        response: {
         statusName: 'code', //规定数据状态的字段名称,默认:code
         statusCode: 0, //规定成功的状态码,默认:0
         msgName: 'msg', //规定状态信息的字段名称,默认:msg
         countName: 'count', //规定数据总数的字段名称,默认:count
         dataName: 'data', //规定数据列表的字段名称,默认:data
        },
        page: true, //是否分页
        limit: 10, //每页显示的条数
        limits: [10, 20, 30], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90]。
        cols: [
         [
          {
           field: 'username', //字段名
           title: '用户名', //标题
           width: 150,
           sort: true, //是否允许排序 默认:false
           fixed: 'left' //固定列
          }, {
          field: 'sex', //字段名
          title: '性别', //标题
          width: 100,
          sort: true //是否允许排序 默认:false
          //fixed: 'left' //固定列
         }, {
          field: 'age', //字段名
          title: '年龄', //标题
          width: 100,
          sort: true //是否允许排序 默认:false
          //fixed: 'left' //固定列
         }, {
          field: 'mobile', //字段名
          title: '手机', //标题
          width: 100,
          sort: true //是否允许排序 默认:false
          //fixed: 'left' //固定列
         }, {
          field: 'address', //字段名
          title: '地址', //标题
          width: 150,
          sort: true //是否允许排序 默认:false
          //fixed: 'left' //固定列
         },{
          field: '', //字段名
          title: '操作', //标题
          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配置,以及逻辑实现代码分别如下:

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)、通过查询UserInfo model底下的数据,然后分别循环这个列表,把动态表格所需要显示的值,填充到一个字典底下,并追加进列表当中,最后再统一构成一个字典data,把列表数据,状态码,返回信息,数量返回回去。

(2)其中通过ajax请求时,可能会有csrf跨域的限制,因为我们没有构造一个表单,并在表单底下加个 {% csrf_token %} ,导致请求不过去,所以要加个@csrf_exempt注解方式来解决。

补充知识:django数据接口与layUI框架数据表格结合:数据渲染和真实分页

第一步 :

通过查询数据转化为layui的数据接口模式

{“code”: 0, “msg”: “”, “count”:总数, “data”: 查询的数据}

自行定义访问路径,当url访问 xxxx/tasks/data/ 路径时:访问视图response_data,将数据传到前端,通过html可查看相关代码

视图函数views.py

import json
def response_data(request):
 dates=AssetInfo.objects.all()#自行创建测试数据。
 dataCount = dates.count()#数据总数
 lis=[]
 for i in dates:
  dict={}
  dict['jobname']=i.jobname#与前端一一对应,自行设置要展示的字段
  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)#导入分页模块分页操作,不写前端只展示一页数据,
 contacts = pageInator.page(pageIndex)#导入分页模块分页操作,不写前端只展示一页数据,
 res=[]
 for i in contacts:
  res.append(i)
 print(res)
 Result = {"code": 0, "msg": "", "count":dataCount, "data": res}
 # json.dumps(Result, cls=DateEncoder)没有时间字段问题可直接返回此代码。有就返回下面代码
 return HttpResponse(json.dumps(Result, cls=DateEncoder), content_type="application/json")

#解决时间字段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="/static/layui-v2.5.5/layui/css/layui.css" rel="external nofollow" media="all">
 <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>

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

<script src="/static/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

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

 table.render({
 elem: '#test'
 ,url:'/tasks/data/'#数据接口
  ,page: true
  ,limit:5
  ,limits:[5,15,20]
 ,cols: [[
 {field: 'jobname', title: '任务名'}
   , {field: 'Departments', title: '部门'}
   , {field: 'groups', title: '配置'}
   , {field: 'email', title: '邮箱'}
   , {field: 'status', title: '状态'}
   , {field: 'taskNo', title: '队列状态' }
   , {field: 'create_time', title: '创建时间'}
 ]]

 });
});
</script>

</body>
</html>

效果图

django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例

以上这篇django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python科学计算环境推荐——Anaconda
Jun 30 Python
Python中的anydbm模版和shelve模版使用指南
Jul 09 Python
python如何通过protobuf实现rpc
Mar 06 Python
Python中的time模块与datetime模块用法总结
Jun 30 Python
给你选择Python语言实现机器学习算法的三大理由
Nov 15 Python
Python机器学习之K-Means聚类实现详解
Feb 22 Python
对python调用RPC接口的实例详解
Jan 03 Python
Python地图绘制实操详解
Mar 04 Python
python实现连连看辅助之图像识别延伸
Jul 17 Python
wxPython实现画图板
Aug 27 Python
Pandas之缺失数据的实现
Jan 06 Python
python 求两个向量的顺时针夹角操作
Mar 04 Python
Python爬取阿拉丁统计信息过程图解
May 12 #Python
PyPDF2读取PDF文件内容保存到本地TXT实例
May 12 #Python
Python3.7下安装pyqt5的方法步骤(图文)
May 12 #Python
小 200 行 Python 代码制作一个换脸程序
May 12 #Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
May 12 #Python
Python如何根据时间序列数据作图
May 12 #Python
python logging.info在终端没输出的解决
May 12 #Python
You might like
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python字符串连接方法分析
2016/04/12 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
Python创建数字列表的示例
2019/11/28 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
项目开发计划书
2014/01/09 职场文书
大客户经理岗位职责
2015/04/09 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
雷锋电影观后感
2015/06/10 职场文书
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle