新增一个表格临时数据区的概念

讨论 已结 精帖 82 8757
岁月小偷
悬赏:80飞吻
又是一个可能一看也不知道啥玩意的标题[偷笑] 表达能力有限哎,本来想改成简单点的“表格新增一行的一种实现方式”,但是想来想去还是不准确。因为真不是单纯的新增一行那么了事,先看效果图:

可能看到这你会说这不就是新增一行嘛,实际也是[嘻嘻] ,看怎么理解而已。
先说说场景,表格如何新增一行这个问题也有很多人问过,实际这个要分好多种情况的:
一种是新增的时候请求接口持久化之后返回一条数据,想要把这条数据直接加进去不用重新reload,这个一般不建议折腾,重新reload才是正道。
另一种就是新增的这条记录是临时的还没有持久化的,后面编辑之后再提交保存,这个一般很多的想法都是要在table的视图里面新增一个tr之类的,但是实际这里又有一个分支,就是这个table是data模式的还是url模式的,如果是data模式的,也不建议折腾,做法就是往旧的数据push一条记录,然后重新reload,如果是这种情况的可以看看我以前的另一个帖子: table纯data模式下的新增与删除
本帖重点要说的是最复杂的一种情况,就是是url模式的,要新增一些临时的记录,同时可以在table中编辑他们最后再提交。具体还是看代码先:
首先是定义核心的方法

大概的思路:首先要新增一行tr不能单纯的处理dom节点,更重要的是背后需要处理数据,后面也可以方便的得到,为了能够最大化的复用layui的种种功能,这里做的对策就是给table的cache新增对应的临时数据,然后按照初始化一样的给生成出来临时数据对应的dom节点,当然稍有不同,不是完全跟初始化一样,比如新增的节点希望每个td都是可以编辑的除了一些不想要的除外,比如复选框呀,序号列呀,工具栏呀,还有一些业务上不要的,比如主键之类的,其他的字段一般来说都是想要默认点击就可以edit,然后修改之后希望能update到cache中,但是又不能改变原始的功能,比如修改了cache之后希望不会影响它的长度,等等,最后用了一个“平行空间”的方式(可能形容不恰当,但是大概就是说新增了cache里面的记录,也不会影响原始的数组的长度),就是从-1开始去定义新增的缓存数据的“下标”
最后得到的页面的dom节点
然后对外透漏一个可调用接口

上面的方法是tablePlug内部的方法,对外提供一个接口方便调用,只要指定想要添加的table的id是什么即可

同时考虑到新增的tr节点中可能会出现比如laydate或者上传组件等需要在节点生成之后做对应的render的,就提供了一个回调,在addTemp节点生成之后会进入这个回调,进入回调的时候this就是当前的table的config,然后实参就是当前新增的tr的jquery对象。
也许有疑问可能叫做新增一行比较好理解,起个addRow这个名字会更加好理解,但是实际上面也说了,这个不是单纯的新增一个行,而且据比较可靠的消息,后面的版本估计会提供一个table.addRow的方法,来新增一行,但是具体实现是什么样子的这个不清楚,所以这里再起名的时候用了addTemp来区分开来。
提供获得当前的临时数据的方法

有新增,自然是要在想要保存的时候需要得到这些新增的临时数据的记录,所以提供了一个getTemp的方法可以跟方便的得到当前已经存在的临时数据
提供清空临时数据的方法

同理有新增就需要删除,清空,目前删除一条和删除全部都用同一个方法,cleanTemp主要看第二个参数是否带了要删除的下标,如果有就是删除某一条记录,如果没有就是删除所有的。
调整pullData的逻辑,如果存在临时数据提醒用户还有未保存的临时数据需要保存之后再重载,不然会丢失之前的操作等细节后面再优化。

这里有一个比较麻烦的就是,是否需要支持表格刷新也要支持之前临时数据的记录,如果需要,那就涉及到一个叫做初始化的时候要把临时数据也渲染出来,然后重新请求的时候要把临时数据也给记录起来,这些细节的处理,目前简单粗暴的限制有临时数据要重新pullData就提醒未保存,询问是否放弃事前未保存的临时数据,继续刷新,如果取消了就提示临时数据的表格位置。但是有个问题是点击下面的分页会直接改了laypage的组件了再pullData所以即使后面阻断了,但是page的内容改了,这块是需要优化的,同时如果大家觉得有必要记录起来后面可以换页面最后的最后再提交保存的话也可以给建议。
使用:
今天太晚了,明天找时间对每个地方的代码做一个稍微详细点的解析,先发出来献给还在加班的娃,有时间有兴趣的也可以自己看看里面的逻辑,或者测试一下有没有什么坑[微笑] 2019年1月23日23:08:30
更新于 2019年1月28日21:14:11
新增了鼠标悬浮在临时的数据区的时候显示删除的该条临时数据的按钮,点击可单条删除的功能
回帖