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学习笔记整理3之输入输出、python eval函数
Dec 14 Python
Python自定义类的数组排序实现代码
Aug 28 Python
Python3安装Pymongo详细步骤
May 26 Python
python数据类型_元组、字典常用操作方法(介绍)
May 30 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
May 30 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
Aug 07 Python
Django model update的多种用法介绍
Mar 28 Python
Pytorch 实现sobel算子的卷积操作详解
Jan 10 Python
Pyspark获取并处理RDD数据代码实例
Mar 27 Python
Python基于DB-API操作MySQL数据库过程解析
Apr 23 Python
基于Python快速处理PDF表格数据
Jun 03 Python
Python新手学习raise用法
Jun 03 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
投票管理程序
2006/10/09 PHP
Smarty3配置及入门语法
2017/02/22 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
通过实例解析js简易模块加载器
2019/06/17 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
python3+PyQt5实现柱状图
2018/04/24 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
化妆品促销方案
2014/02/24 职场文书
毕业生自荐信格式
2014/03/07 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
还款承诺书范文
2014/05/20 职场文书
长城导游词
2015/01/30 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
怒海潜将观后感
2015/06/11 职场文书
贷款收入证明范本
2015/06/12 职场文书
校园开放日新闻稿
2015/07/17 职场文书
经典祝酒词大全
2015/08/12 职场文书
员工工作心得体会
2019/05/07 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
Go gorilla/sessions库安装使用
2022/08/14 Golang