django+layui表格数据管理

阅读:64

之前做项目对表格数据管理一直都很头疼，表格通常会包含分页、筛选、单行表格数据操作、多行表格数据操作、排序这些功能。对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']; // 每行的id
    console.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;
    }
});

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

心得

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

本文为CSDN博主"流离幻影"的原创文章，遵循 CC 4.0 BY-SA 版权协议, 转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43606857/article/details/123804869