之前做项目对表格数据管理一直都很头疼，表格通常会包含分页、筛选、单行表格数据操作、多行表格数据操作、排序这些功能。对vue这个框架不熟悉，前后端不分离导致在表格这一项上需要捋大量逻辑、写大量的代码。后来试了一下layui这个前端框架中的表格，意外发现十分好用
layuilayui框架和其他前端框架并没有什么区别，拥有比较齐全的组件，使用文档看的是有点难受，因为代码部分和组件部分各自堆积在一起，找起来让人头疼。
虽然但是，用起来的时候还是很香的layui官网
layui表格查看layui表格文档，使用异步请求表格数据，先写一个简单表格界面。下面代码中一定要确保引入了你的css和js文件，layui.css和layui.js可以在layui官网下载，jquery去 jquery官网 下载
document
这里向后台/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']; // 每行的id
console.log(id)
if (obj.event === 'del') { // 删除按钮
layer./confirm/i('真的删除这一行数据吗（该操作无法撤销）', 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/i('增加数据', {title:'提示'}, function(index){
// 你的操作
layer.close(index);
});
break;
}
});
同理需要在其中写入你的代码，对后台发送请求，后台对数据库进行操控，就能实现数据的多行操作
心得文章里的实例代码都是简单处理过的，记录我的所学所得。
