Layui数据表格缓存问题

发表于 | 分类于 | 浏览量
| 字数统计 768 | 阅读时长 约3分钟

Layui数据表格很好使用，减少了像我这样的程序员很多工作，有很多组件拿来就可使用，其中的数据表格使用频率极其高，但是我在使用中还是遇到不少问题，以下将自己使用中遇到的问题和采取的解决方案（如果有😄）做个记录。

我使用版本：2.2.3

数据表格重载问题

table.reload()操作具有继承性，使用table.render()进行初始化渲染时的参数，进行表格重载时都会带上。如下所示，动态渲染出表格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
        table.render({
            elem: '#LAY_table_materials'
            , cols: [[
                {
                    field: 'typeName',
                    title: '材料类型',
                    align:'center',
                    width:'15%'
                }
                , {
                    field: 'materialName',
                    title: '材料名称',
                    align:'center',
                    width:'16%'
                }
                , {
                    field: 'unit',
                    title: '单位',
                    align:'center',
                    width:'10%'
                }
                , {
                    field: 'price',
                    title: '单价（元）',
                    align:'center',
                    edit: 'text',
                    event:"editPrice",
                    width:'15%'
                }
                , {
                    field: 'quantity',
                    title: '购买数量',
                    align:'center',
                    edit: "text",
                    event:"editQuantity",
                    width:'10%'
                }
                , {
                    field: 'totalPrice',
                    title: '总价（元）',
                    align:'center',
                    width:'15%'
                }
                , {
                    fixed: 'right',
                    title: '操作',
                    align:'center',
                    toolbar: '#barOption',
                    width:'20%'
                }
            ]]
            ,done: function(res, curr, count){
                ......
            }
            <c:if test="${not empty id}">
            , url: '../can_material_order/layUIPage'
            , method: 'post'
            ,where:{
                "purchaseId":id
            }
            , page: true
            , request: {
                limitName: "size"
            }
            , limits: [10, 20, 30, 40, 50]
            , limit: 10
            </c:if>
        });

后续表格重载时使用table.reload(LAY_table_materials)，等同于重新执行了初始化渲染，done里的函数同样会执行。

现在我有这样一个需求：从弹出框中的数据表格选择需要采购的原材料，点击确定后父页面获得所选择的原材料，然后动态添加到父页面的数据表格中（一开始只有表头），再对表中的单价或者数量单元格编辑后，执行重载，将总价和合计行计算显示出来，我使用以下方法进行才有效。

1
2
3
4
table.reload("LAY_table_materials",{
	data:table.cache["LAY_table_materials"],
	url:''
});

如果去掉data参数，若进行过删除操作（数据表格的del()方法，未与后端交互），重载后之前删掉的数据又回来了。原因是table会保存初次渲染时的数据，没有赋值data，同时URL又为空的话，表格重载的数据就是第一次渲染时的。

数据表格删除问题

删除实例：

1
2
3
4
5
6
7
8
9
10
11
if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something

再看源码：

这一删除操作不是直接删除元素，而是将元素内容置空，这样在使用table.cache时会出现问题，例如判断当前数据表格是否为空，还得遍历一下数组。可以更改源码中的table.cache[that.key][index]=[]为table.cache[that.key][index].splice(index,1)实现真正删除元素。

其他问题有待发现更新……

本文已结束 ❤ 感谢阅读
觉得文章不错，赞赏站长一包辣条( •̆ ᵕ •̆ )◞ ❤
0%