django+layui表格数据管理

之前做项目对表格数据管理一直都很头疼，表格通常会包含分页、筛选、单行表格数据操作、多行表格数据操作、排序这些功能。对vue这个框架不熟悉，前后端不分离导致在表格这一项上需要捋大量逻辑、写大量的代码。后来试了一下layui这个前端框架中的表格，意外发现十分好用

layui

layui框架和其他前端框架并没有什么区别，拥有比较齐全的组件，使用文档看的是有点难受，因为代码部分和组件部分各自堆积在一起，找起来让人头疼。

虽然但是，用起来的时候还是很香的layui官网

layui表格

查看layui表格文档，使用异步请求表格数据，先写一个简单表格界面。下面代码中一定要确保引入了你的css和js文件，layui.css和layui.js可以在layui官网下载，jquery去 jquery官网下载

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" type="text/css" href="{% static "index/css/layui.css" %}">
</head>
<body>
<div style="padding: 20px 40px"><table class="layui-hide" id="test" lay-filter="test"></table>
</div></body>
<script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">增加数据</button><button class="layui-btn layui-btn-sm" lay-event="deleteCheckData" style="background-color: #ef4136">删除所选</button></div>
</script>
<script type="text/html" id="barDemo"><a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script><script src="{% static 'index/js/jquery.min.js' %}"></script>
<script src="{% static 'index/layui.js' %}"></script>
<script>layui.use(['table', 'form'], function () {let table = layui.table;let form = layui.form;table.render({elem: '#test', url: '/get_data' //请求数据接口路由, method: 'post', toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板, defaultToolbar: ['exports', 'print'], title: '用户数据表', cols: [[{type: 'checkbox'}, {field: 'id', title: 'ID', align: "center", sort: true}, {field: 'name', title: '名称', align: "center", sort: true}, {field: 'sex', title: '性别', align: "center", sort: true}, {field: 'age', title: '年纪', align: "center", sort: true}, {fixed: 'right', title: '操作', toolbar: '#barDemo', align: "center"}]], page: true, error: function(error, content){message_fail('加载失败');console.log(error, content)}});//头工具栏事件//监听行工具事件});
</script>
</html>

这里向后台/get_data接口请求了数据，我们需要写这样一个接口提供数据，并且返回的json数据要满足文档的格式。前端field的名字要在返回的data值里的数据键名里面

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def get_data(request):data = [{'id': x,'name': '小' + str(x),'sex': x % 2,'age': x} for x in range(10)] # 简单的创造数据，正常是从数据中读出这些数据context = {"code": 0,"msg": "","count": 1000, # 所有数据数量"data": data # 需要查询出来数据}return JsonResponse(context, safe=False)

这样一来，界面上就会显示查询出来的数据，显示的数据正是我们创造的数据

如此该界面有了初步样子，列名旁边的上下箭头可以进行排序，点击下一页也会显示，只是显示的是相同的数据，下面我们开始慢慢增加功能。

分页

现在显示的数据有一千条，因为返回的json数据里count为1000。这里我们应该换成真实的数据数量，我们修改返回数据的控制器，返回不同页的数据。

@csrf_exempt
def get_data(request):# 接收参数page = int(request.POST.get('page', '1'))limit = int(request.POST.get('limit', '10'))start = (page - 1) * limit # 数据起始位置end = page * limit # 数据终止位置data = [{'id': x + start, # 简单的改变id来表示数据的改变'name': '小' + str(x),'sex': x % 2,'age': x} for x in range(limit)] # 改变查询数量context = {"code": 0,"msg": "","count": 1000,"data": data}return JsonResponse(context, safe=False)

我们接收page和limit两个参数，这是前端为了控制分页的参数，page表示当前页，limit表示查询数量，像上面一样修改代码，重新刷新页面

我们数据不再是一样的数据，现在改变每页条数和跳转下一页查询出的都是对应的数据，这样我们完成了分页功能，实际中请修改为你的数据库查询操作。

单条数据操作

在html的注释\\监听行工具事件下增加代码

//监听行工具事件
table.on('tool(test)', function (obj) {let data = obj.data;let id = data['id']; // 每行的idconsole.log(id)if (obj.event === 'del') { // 删除按钮layer.confirm('真的删除这一行数据吗（该操作无法撤销）', function (index) {$.ajax({ // ajax异步请求type: "post",contentType: "application/json;charset=UTF-8",url: "/delete",data: JSON.stringify({"id":id,}),success: function (result) {// 你的操作obj.del(); // 前端上删除该条数据，后台数据库并没删除},})layer.close(index);});}else if(obj.event === 'edit'){ // 编辑按钮// 你的操作layer.msg('我是编辑');}
});

这里调出了这些按钮的触发事件，可以在这里触发时向后台发送数据，实现数据库中的修改删除，上面代码放了ajax异步请求代码，成功后的操作和控制器的代码都需要自己编写。每次点击都会输出每行数据的id，这里id就是后端返回的数据里的id，可以使用数据库的主键，这样方便对数据进行操控。

多条数据的操控

对于多条数据的操作也是同理，我们只需要拿到数据的主键，传给后端，后端就可以对这些数据进行相应的操作

//头工具栏事件
table.on('toolbar(test)', function (obj) {var checkStatus = table.checkStatus(obj.config.id);console.log(checkStatus);switch (obj.event) {case 'delete':var data = checkStatus.data; // 获取选中的行let delete_id_list = [] for(var i = 0; i < data.length; i++){delete_id_list.push(data[i]['id']);}layer.msg('我是删除所选, 选中数据id值：' + JSON.stringify(delete_id_list));// 你的操作break;case 'add':layer.confirm('增加数据', {title:'提示'}, function(index){// 你的操作layer.close(index);});break;}
});

同理需要在其中写入你的代码，对后台发送请求，后台对数据库进行操控，就能实现数据的多行操作

心得

文章里的实例代码都是简单处理过的，记录我的所学所得。