Django 之 layui 自定义条件过滤
座右铭：怎么简单怎么来，以实现功能为主。
欢迎大家关注公众号与我交流
具体可参考：https://layui.gitee.io/v2/demo/table.html
html代码
用户名
项目名字
标注方
任务ID
任务类型
开始时间
结束时间
按钮
JavaScript 代码
const table = layui.table;
//渲染表格
table.render({//渲染table
url: '/gsalldata', //数据获取url
method: 'GET', //数据传输方式为post
elem: '#test', //设置容器
// toolbar: '#toolbar',
height: 'full-185', //高度为屏幕高度-20
page: true,
request: {
pageName: 'pageIndex', // 页码的参数名称，默认：page
limitName: 'pageSize' // 每页数据量的参数名，默认：limit
},
response: {
statusName: 'code', // 规定数据状态的字段名称，默认：code
statusCode: 0, // 规定成功的状态码，默认：0
msgName: 'msg', // 规定状态信息的字段名称，默认：msg
countName: 'count', // 规定数据总数的字段名称，默认：count
dataName: 'data' // 规定数据列表的字段名称，默认：data
},
page: {
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定义分页布局
curr: 1, // 设置默认起始页1
groups: 3, //只显示10个连续页码,就是说显示10个可见页其他的省略
first: '首页', // 不显示首页
last: '尾页' // 不显示尾页
},
limit: 20,
limits: [20, 50, 100],
skin: 'row', //表格风格
even: true, //隔行换色
cols: [[ //设置列标签、标题、宽度、是否排序等
// {checkbox:true}, // 复选框
{ field: 'id', title: 'ID', fixed: left },
{ field: 'uname', title: '用户名', width: 100 },
{ field: 'pname', title: '项目名字', },
{ field: 'waibao', title: '标注方', },
{ field: 'task_id', title: '任务ID', },
{ field: 'dtime', title: '日期' },
{ field: 'kinds', title: '任务类型', },
{ field: 'pnums', title: '图片/视频数量', },
{ field: 'knums', title: '框数/属性/时长', },
{ field: 'ptimes', title: '工时' },
{ fixed: 'right', title: '操作', toolbar: '#barDemo' },//设置每行的工具栏以及其容器
]],
});
// 表格后台过滤
$('#serch').click(function () {
const uname = $('#uname_search').val();
const pname = $('#pname_search option:selected').val();
const bzf = $('#bzf_search option:selected').val();
const taskid = $("#taskid_search").val();
const taskkind = $('#taskkind_search option:selected').val();
const begin_time = $("#begin_time_search").val();
const last_time = $("#last_time_search").val();
let url = '/gsalldata?uname=' + uname + '&pname=' + pname + "&bzf=" + bzf + "&taskid=" + taskid + "&taskkind=" + taskkind + "&begin_time=" + begin_time + "&last_time=" + last_time; //第一种方法
table.reload('test', {
url: url,
page: {
curr: 1 //重新从第 1 页开始
}
});
});
// 表格过滤重置
$("#reset").click(function () {
let url = '/gsalldata'
table.reload('test', {
url: url,
page: {
curr: 1 //重新从第 1 页开始
}
});
$('#uname_search').find('option:first').prop("selected", "selected");
$('#pname_search').find('option:first').prop("selected", "selected");
$('#bzf_search').find('option:first').prop("selected", "selected");
$("#taskid_search").val("");
$('#taskkind_search').find('option:first').prop("selected", "selected");
$("#begin_time_search").val("");
$("#last_time_search").val("");
})
// 操作栏-编辑/删除
table.on('tool(test)', function (obj) { // 双击 toolDouble
var data = obj.data;
// console.log(obj.data)
if (obj.event === 'del') {
if (sessionStorage.getItem("power") != '1') {
$(".alert-danger").html("您没有删除数据的权限，请联系管理员!");
$(".alert-danger").addClass("show");
window.setTimeout(function () {
$(".alert-danger").removeClass("show");
}, 1000);//显示的时间
} else {
layer.confirm('真的删除行么', function (index) {
$.ajax("/dtdel/", {
method: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: {
n: $("#name").text(),
id: obj.data.id
},
}).done(function (res) {
if (res && res.data == "successful") {
let url = '/gsalldata'
table.reload('test', { url: url, page: { curr: 1 } });//重新从第 1 页开始
$(".alert-danger").html("ID: " + obj.data.id + " 删除成功!");
$(".alert-danger").addClass("show");
window.setTimeout(function () {
$(".alert-danger").removeClass("show");
}, 1000);//显示的时间
} else {
$(".alert-danger").html("ID: " + obj.data.id + " 删除失败!");
$(".alert-danger").addClass("show");
window.setTimeout(function () {
$(".alert-danger").removeClass("show");
}, 1000);//显示的时间
}
});
layer.close(index);
});
}
} else if (obj.event === 'edit') {// 数据修改
if (obj.data.uname != $('#name').text()) {
$(".alert-danger").html("您只能修改自己的数据喔!");
$(".alert-danger").addClass("show");
window.setTimeout(function () {
$(".alert-danger").removeClass("show");
}, 1000);//显示的时间
} else {
document.location.href = "/update?id=" + obj.data.id;
};
}
});views.py 代码
def gsalldata(request):
if (
request.GET.get("uname")
== request.GET.get("pname")
== request.GET.get("bzf")
== request.GET.get("taskid")
== request.GET.get("taskkind")
== request.GET.get("dtime")
== request.GET.get("lasttime")
== None
):
now_time = datetime.now()
before_time = (
now_time - timedelta(days=CONFIG["gs_data_show_count"])
).strftime("%Y-%m-%d")
now_time = now_time.strftime("%Y-%m-%d")
data_object = list(
models.Task.objects.all().filter(dtime__range=[before_time, now_time])
)
data = []
for i in data_object:
tmp_dict = {}
tmp_dict["id"] = i.id
tmp_dict["uname"] = i.uname
tmp_dict["pname"] = i.pname
tmp_dict["waibao"] = i.waibao
tmp_dict["task_id"] = i.task_id
tmp_dict["dtime"] = i.dtime
tmp_dict["kinds"] = i.kinds
tmp_dict["pnums"] = i.pnums
tmp_dict["knums"] = i.knums
tmp_dict["ptimes"] = i.ptimes
data.append(tmp_dict)
data.sort(key=lambda x: x["dtime"], reverse=True)
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
res = []
pageInator = Paginator(data, pageSize)
context = pageInator.page(pageIndex)
for item in context:
res.append(item)
return JsonResponse({"code": 0, "msg": "查询成功", "count": len(data), "data": res})
else:
uname = request.GET.get("uname").strip()
pname = request.GET.get("pname").strip()
waibao = request.GET.get("bzf").strip()
task_id = request.GET.get("taskid").strip()
taskkind = request.GET.get("taskkind").strip()
dtime = request.GET.get("begin_time").strip()
lasttime = request.GET.get("last_time").strip()
data = search(uname, pname, waibao, task_id, taskkind, dtime, lasttime)
data.sort(key=lambda x: x["dtime"], reverse=True)
res = []
pageIndex = request.GET.get("pageIndex")
pageSize = request.GET.get("pageSize")
pageInator = Paginator(data, pageSize)
context = pageInator.page(pageIndex)
for item in context:
res.append(item)
return JsonResponse(
{"code": 0, "message": "查询成功", "count": len(data), "data": res}
)