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

讨论 未结
22 444
岁月小偷
悬赏: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
新增了鼠标悬浮在临时的数据区的时候显示删除的该条临时数据的按钮,点击可单条删除的功能
回帖
  • 简吖
    2019-1-23
    [嘻嘻] 资瓷
    0 回复
  • Xiao情子
    2019-1-24
    前排[可爱]
    0 回复
  • 非常好!涵盖了各个场景:data、url甚至是后台持久化都考虑到了,可为大全!!
    0 回复
  • @dududu @Xiao情子 @简吖 good morning[微笑] [微笑] [微笑]
    0 回复
  • 有个小bug 就是在临时增加时间的时候 ,弹出了时间控件,不选择时间,然后点击下一个单元格,时间控件不消失
    0 回复
  • @o0简单 嗯嗯,是存在的,主要是因为点击了一个可编辑的td它阻止冒泡了然后就没有触发laydate设置的document的click监听去关掉当前的laydate选择器
    0 回复
  • 膜拜大神![嘻嘻]
    0 回复
  • [good] [good] [good] 666啊
    0 回复
  • [给力]
    0 回复
  • Zlheb
    2019-1-24
    有一些简单的数据确实可以这样直接在列表添加,复杂了就不行了,以前没用数据表格之前也接触过这种需求,我是用的模板去添加的。为你的敬业精神点赞[赞]
    0 回复
  • 滋磁 [嘻嘻]
    0 回复
  • @破碎幻灭 @莫辞 @菜鸟程序猿 谢谢认可,今天还会找时间补充,帖子,也会强化一下现在的一些逻辑,比如可以删除某一条记录的,不过怎么实现可以删除单条的还没想好,要在复选单选框或者numbers列弄一个icon还是要弄一个悬浮的icon还是要双击都各有好坏,有什么好的建议没哈[嘻嘻]
    @Zlheb 嗯嗯,主要是挺多人在QQ上问过,我们自己一般的套路就是弹出一个form表单跟点击编辑一样输入然后请求接口存起来,不过如果是很简单的表格确实弹出form编辑保存刷新表格等等这些就有点“麻烦”
    0 回复
  • 我之前做的一个 没有点击编辑的功能

    在另一个页面里 做添加

    修改了一下排序的方法 让他把新写入的内容渲染出来( 这个方法是之前做上移 下移动 做排序使用的 )


    最后用
    table.cache['fields-table']
    获取添加完成的数据


    0 回复
  • When时过
    2019-1-24
    [鼓掌]
    0 回复
  • @岁月小偷 可编辑列表怎么加入时间控件呢,我看已经有下拉框了[亲亲]
    0 回复
  • @flyer631979 你说的是这个么?

    例子里面就有了,主要有一个点是laydate必须在节点生成之后去render它,所以我在addTemp的时候就提供了一个回调的设置,在加进去tr之后会执行比如:
    0 回复
  • @岁月小偷 恩恩,哈哈,看到了,谢谢
    0 回复
  • [good] 最近一直在纠结动态添加数据。。。。参考下
    0 回复
  • 一直以为表格添加数据或者修改数据,要异步ajax加载页面。。研究了好几天ajax。。。
    0 回复
  • @Infinite466 可以试试看如何哈,这块主要处理的是添加一些临时的记录后面批量保存,其他的业务比如是直接先持久化了需要新增到表格里面,实际还是reload一下就好,所以具体还是看需求额[微笑]
    0 回复
  • @岁月小偷 好的我试试
    0 回复
  • 一念149
    2019-1-29
    0 回复