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注解方式来解决。