交互与前端14 Tabulator 表格实践2

说明

将上一篇提到的内容进行了实现,整体上还算是比较符合预期吧,但并不是完美。这既和我的需求比较“妖”有关系,也和前端的确不太熟有关。但不管怎么样,反正实现了功能。


1 实现自动为表格增加有序值字段方法(这个应该是做过的,要挪移一下) ~ 1 Hour - 符合预期
2 将上述的脚本和对应视图进行检查和封装。 ~ 2 Hour - 超过预期1个小时,主要是因为建立了主键索引,当重复插入时会报错。我还以为是自己的工具有问题,调试了好一会。
3 增加自动根据数据库服务名创建连接的方法。 ~ 2 Hour - 符合预期


做完后我试着快速增加一个表格,大约花了5分钟,但是变量声明之类的过于粗糙,我觉得可以加一倍时间估计。这也低于之前预估的20分钟。

内容

1 将通用的js函数放到文件里

关于增删行和修改单元格的js函数。

// 编辑
var MyCellEdit02 = function(cell, onRendered, success, cancel){
   

    var cellValue = cell.getValue()
    input = document.createElement("input");
    row = cell.getRow()
    $(row.getElement()).css("background-color",'')
    $(row.getElement()).css("color", "")
    // input.setAttribute("type", "date");
    
    input.style.padding = "4px";
    input.style.width = "100%";
    input.style.boxSizing = "border-box";
    
    input.value = cellValue;
    
    onRendered(function(){
   
        input.focus();
        input.style.height = "100%";
        input.style.background ='yellow'
    });
    
    function onChange(){
   
        if(input.value != cellValue){
   
            row_id = cell.getData().id
            colname = cell.getColumn().getField()
    
            filter_dict = {
   }
            attr_dict = {
   }
            filter_dict['tid'] = row_id
            attr_dict[colname] = input.value
            attr_dict['_is_enable'] = 1
            attr_dict['_update_time']= getDatetime()
    
    
            // alert(colname)
            cell_para_dict = JSON.parse(JSON.stringify(para_dict))
            cell_para_dict['filter_dict'] = filter_dict 
            cell_para_dict['attr_dict'] = attr_dict
    
    
            row.update({
   '_update_time' :attr_dict['_update_time']})
    
            cell_post_json('/data/view015_x_update_mongo_data/', cell_para_dict, $(
以下是在 Django 框架下使用 Tabulator 绘制表格的代码示例: 1. 在前端 HTML 文件中引入 Tabulator 和 jQuery 库: ```html <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js"></script> </head> <body> <div id="table-container"></div> </body> </html> ``` 2. 在前端 JavaScript 文件中编写绘制表格的代码: ```javascript var table = new Tabulator("#table-container", { ajaxURL: "/api/data", // 后端 API 接口地址 layout: "fitColumns", // 自适应表格宽度 pagination: "remote", // 开启分页,使用后端分页 paginationSize: 10, // 每页显示的记录数 columns: [ { title: "ID", field: "id" }, { title: "姓名", field: "name" }, { title: "年龄", field: "age" }, ], }); ``` 3. 在后端 Django 应用中编写 API 接口代码: ```python from django.http import JsonResponse from myapp.models import MyModel def data_api(request): page = request.GET.get("page", 1) size = request.GET.get("size", 10) start = (page - 1) * size end = start + size data = MyModel.objects.all()[start:end].values("id", "name", "age") count = MyModel.objects.count() return JsonResponse({"data": list(data), "count": count}) ``` 其中,`MyModel` 是你的数据模型,需要根据你的实际情况进行修改。在 API 接口中,我们使用了 `page` 和 `size` 参数来进行分页,`start` 和 `end` 变量用于计算当前页需要显示的记录范围,`count` 变量用于返回总记录数。最后,我们将数据以 JSON 格式返回给前端。 4. 将 API 接口注册到 Django 路由中: ```python from django.urls import path from myapp.views import data_api urlpatterns = [ path("api/data", data_api), ] ``` 完成以上步骤后,你就可以在前端页面中看到使用 Tabulator 绘制的表格,并且可以进行分页和数据排序等操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值