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语言的12个基础知识点小结
Jul 10 Python
Python编程scoketServer实现多线程同步实例代码
Jan 29 Python
浅谈python函数调用返回两个或多个变量的方法
Jan 23 Python
python3利用Socket实现通信的方法示例
May 06 Python
Python实现插入排序和选择排序的方法
May 12 Python
浅谈Python type的使用
Nov 19 Python
Django多进程滚动日志问题解决方案
Dec 17 Python
基于virtualenv创建python虚拟环境过程图解
Mar 30 Python
keras 如何保存最佳的训练模型
May 25 Python
python和php哪个更适合写爬虫
Jun 22 Python
Python ckeditor富文本编辑器代码实例解析
Jun 22 Python
浅谈如何使用python抓取网页中的动态数据实现
Aug 17 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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
easyui-datagrid特殊字符不能显示的处理方法
2017/04/12 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
vue eslint简要配置教程详解
2019/07/26 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python os模块介绍
2014/11/30 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
python如何随机生成高强度密码
2020/08/19 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
2014年惩防体系建设工作总结
2014/12/01 职场文书
顶岗实习计划书
2015/01/16 职场文书
冰雪公主观后感
2015/06/16 职场文书
生产设备维护保养制度
2015/08/06 职场文书
宝塔更新Python及Flask项目的部署
2022/04/11 Python