关于table的功能实现之checkbox状态的跨页保存

讨论 已结
14 1003
岁月小偷
悬赏:50飞吻
实现的是table组件设置url取数的时候如果有checkbox列分页状态下如何维护checkbox的状态功能。目前table组件没有支持(可以去看下官网的例子 http://www.layui.com/demo/table/checkbox.html ),把自己烧了不少脑细胞做出来的实现拿出来分享一下,不可能是最优的方法,有更好的实现请不吝赐教。代码下载: https://pan.baidu.com/s/12-YMgtNJfG7UYs96sDyQdg
想要实现的大概如下效果


首先如果table是data模式下的不需要这个,table组件自带就可以跨页保存状态了。如果不考虑url取数的就pass吧或者觉得需要选择的时候就不分页全部显示出来勾选的这个也可以pass,当前的实现主要解决的是url取数而且可以分页并且需要最后再批量的维护绑定关系的(包括新增的还有需要解除的关系)。
差点忘了还需要改一点源码如果觉得麻烦也pass。
源码修改的地方,ajax成功渲染之前先做数据过滤处理,主要解决的就是更新数据中对应选中的数据LAY_CHECKED作用很明显,处理好数据之后剩下的就交给table组件渲染了,不用再done之类的回调再折腾选中的问题

测试页面效果如图


通过绿色按钮设置初始的关系,也可以通过黄色的按钮设置一个初始没有绑定的状态,然后勾选,切换页面之类的随便操作验证,最后点击白色按钮得到当前勾选状态

可以看到最后其实需要告诉后台的就是两个数组,一个需要新增绑定的关系,一个是需要解除绑定的关系,这个一般用在诸如用户角色绑定之类的觉得还是比较实用的。
另外一个应用场景是一开始设置表格的选中状态为[],那么你勾选之后最后获得选中的状态的时候那个新增的数组很明显就是你后面勾上去的,这个主要用在批量处理上,比如批量删除之类。


更新于5月30日早。主要修改内容是数据返回成功之后的数据处理部分判断当前table是否有checkbox列的判断逻辑变化
回帖
  • 小青年a
    2018-5-30
    @岁月小偷 恩恩,正在看,貌似有点复杂,我先看看[嘻嘻]
    0 回复
  • 小青年a
    2018-5-30
    大神,谢谢[good] [good]
    0 回复
  • @小青年a [微笑] 测测有没有问题,还有刚刚更新了点内容,可以看看帖子后面追加的更新,云盘上的文件也上了早上修改的了。
    0 回复
  • @小青年a 嗯嗯,主要就是封装好一些方法了,直接调用就可以了。里面的处理逻辑感兴趣可以看看,当然估计有更方便的实现呢,得找时间再琢磨琢磨[微笑]
    0 回复
  • 小青年a
    2018-5-30
    @岁月小偷 我把table的url路径改为我后台的,但走不进后台,路径也是对的,这怎么回事呢?
    0 回复
  • @小青年a 有报错吗?后台调试一下进去了没?没有的话应该就是设置出错了或者后台的问题。ajax的类型啊,contenttype呀之类的。这个交易以前能用的不?我的修改应该不会影响到交易的。
    0 回复
  • 小青年a
    2018-5-30
    @岁月小偷 现在就是调试的时候走不进后台,我是把这一部分直接把你那部分给替换了
    0 回复
  • @小青年a 走不进后台的代码一般就是接口没写对,浏览器没有报错吗?500之类的
    0 回复
  • 小青年a
    2018-5-30
    @岁月小偷 改好了,是请求方式,少写了method: 'post'
    0 回复
  • 花季岁月
    2018-10-26
    您好 问下 现在的版本能不能不要这么复杂实现这个功能,你这个我没看懂
    0 回复
  • @花季岁月 目前的版本依旧不支持跨页面保存选中的记录,但是多了一个数据回来之后渲染之前的回调parseData,这个可以用来替代我上面修改中的源码修改,所以基本只需要使用我封装的那个维护已选择的数据的那几个,方法额,不过貌似这个帖子里面没有写估计都在云盘的测试代码里面有注释之类的,关键是那个封装,然后以前修改的一个是为了在数据返回回来的时候让他同步一下看看是否需要默认选中的,主要是这个功能,现在可以把这部分的逻辑换到parseData里面去做就可以了。如果实在弄不出来,需要的话我今天下了班或者周末再处理一下优化一下,提供一个配置可以一键配置是否需要跨页存储的选中状态的配置项出来。
    0 回复
  • 花季岁月
    2018-10-26
    @岁月小偷 嗯嗯 你有空弄一下吧 我自己弄估计需要花费大把时间还不一定能弄出来 辛苦了
    0 回复
  • @花季岁月 嗯嗯,我看看今天能处理好测试没问题不,基本满意了就发出来给试试看。
    0 回复
  • 花季岁月
    2018-10-26
    @岁月小偷 好的 谢谢啦
    0 回复