django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
作者:茕夜 发布时间:2021-04-17 02:03:04
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>
效果图
来源:https://blog.csdn.net/u012561176/article/details/104008766
猜你喜欢
- 不知道工商银行帐号是否是这样的格式, 如果错了请大家见谅!<script language="javascript"
- 1、要点击链接,然后点击里面的上传tab,不熟悉的人可能找不到这个上传功能 2、插入的就是1个链接,我希望插入链接的同时插入1个图片代表文件
- 现在的电脑差不多都是固态硬盘了,速度很快,但容量不会太大,经常会出现磁盘空间不足的情况,怎么办,删除那些不重要的最大的文件是最有效的办法。那
- 继续分享pygame有趣的技术知识,欢迎往下看。一、先搭个架子(一)黏贴背景图:实现代码如下:import pygamepygame.ini
- 作为一个新手,你需要以下3个步骤:1、用户注册 > 2、获取token > 3、调取数据数据内容:包含股票、基金、期货、债券、外
- babel-plugin-import 实现自动按需引入Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法b
- Protobuf是google开发的一个序列化和反序列化的协议库,我们可以自己设计传递数据的格式,通过.proto文件定义我们的要传递的数据
- --创建一个表,此表作为子表 create table fk_t as select *from user_objects; delete
- 本文实例讲述了python实现把二维列表变为一维列表的方法。分享给大家供大家参考,具体如下:c = [[1,2,3], [4,5,6], [
- 1:开启binlog日志记录 修改mysql配置文件mysql.ini,在[mysqld]节点下添加 # log-bin log-bin =
- 在使用selenium去获取淘宝商品信息时会遇到登录界面这个登录界面处理的难度在于滑动验证的实现,有的人使用微博登录,避免了滑动验证,那可不
- 在用python进行图像处理时,二值化是非常重要的一步,现总结了自己遇到过的6种 图像二值化的方法(当然这个绝对不是全部的二值化方法,若发现
- 一、property的装饰器用法先简单上个小栗子说明:class property(fget=None,fset=None,fdel=Non
- 在技术问答中看到一个这样的问题,感觉相对比较常见,就单开一篇文章写下来。从纯文本格式文件 “file_in”中读取数据,格式如下:需要输出成
- 不难,代码总共也就25行,大致逻辑如下。总共分为是下面两步在云服务器上部署自定义消息处理服务这里需要我们自定义来处理用户发送过来的消息首先导
- 前言最近在工作中遇到了这个需求,估计搞了一个多小时才把这个远程连接搞好。一台本地电脑,一台云服务器,都是linux系统。下面来看看详细的介绍
- 能坚持全部做完的都是高手直入主题建库建表插入数据代码直接按顺序复制就可以-- 建库CREATE DATABASE `emp`;-- 打开库U
- 引入:if-else的作用,满足一个条件做什么,否则做什么。if-else语句语法结构if 判断条件:要执行的代码else:要执行的代码判断
- Python引入了一个机制:引用计数。引用计数python内部使用引用计数,来保持追踪内存中的对象,Python内部记录了对象有多少个引用,
- 例如:var json = eval('('+ret+')'); 假设我们在服务器端使用php的encode