一个简单table的checkbox单选实现思路

讨论 未结 精帖
60 3841
岁月小偷
悬赏:50飞吻
目前遇到的经常看到有人问table中如何获得操作行的数据之类的问题,结合一个社区的同学问如何实现单选的问题,做了一个小例子(代码 https://pan.baidu.com/s/1t3-DqxCjt_iI30-WV7NTmg )。
效果图

连着录太大了传不了,将就看看

实际上组件后面支持type设置支持radio会更好一些,但是没有情况下还是得自己造,不改动源码的情况下的一个简单实现思路,测试代码主要在table的data模式下,实际在url模式下需要考虑的关键点在于如何保存选中状态和初始化如何设置初始选中这两个问题。这个可以看看俺以前发的另外一个帖子,那个是保存多选的,单选其实思路差不多,实现更加简单明了而已。
刚好中午发的,赶着去吃饭,介绍就比较潦草,不过基本看代码的逻辑思路就可以了。不足的下午找时间再补充,有疑问的欢迎评论里面追问[微笑]

基于2.3.0做的,不过一般2.2.5,2.2.6之类的应该都可以跑
修改与2018年7月2日16:22:24
其实如果只是要实现table的radio功能还有更加简便的方式,就是直接用templet来实现。测试代码:还是在先前发的分享里面一个testTableRadioByTemplet.html
主要的逻辑代码有三处
1、cols的radio字段设置

模板语句

2、form监听radio

3、在想得到某个表格的单选的行的数据

更新于2018年7月2日23:09:22
蹭热度,打个铁[偷笑] 提供一个如何实现设置table中的某一些checkbox是否可用的解决思路。
思路有两做出来的效果也可有两,一个效果就是依旧能看到复选框或者单选框(复选单选其实差别不大,后面就只介绍复选框的),但是不可点击,而且点击了全选也不会把这些不可选的复选框算在内。第二种效果是干脆连个复选框都没有了。
先上效果图
第一种,可见不可选,但是主要是不可选的样式跟可选的太接近,比较难辨别,但是鼠标放上去就明显有差异了。第一种使用的是done回调中对数据过滤出不可选的给disabled掉。

第二种,一方面disabled的checkbox看着不明显,那么干脆干掉,这个实现也可以用第一种的在done回调里面做,也可以使用templet模板的写法。

测试代码: https://pan.baidu.com/s/1t3-DqxCjt_iI30-WV7NTmg 里面的testTableWithDisabledCheckbox.html,附带一个2.3.0版本的table.js的修改过的,当然里面可能不止修改了这个问题,如果有兴趣的话可以自己本地弄一个测试的环境,然后覆盖进去试试看。
效果图一的关键代码

效果图二的关键代码

模板语句

但是!这两块的代码其实只是长征的第一步~下面讨论的是如何最大化的利用当前的table的获得选中行数据的前提下。
我一贯的思路都是能不改源码的情况下不改源码,毕竟后面升级确实麻烦,每次修改都得记录起来,后面升级之后一个一个添加上去,方法比较low,但是有时候又是不得已。不改实现不了。
首先说上面两个关键代码只是迈出了长征的第一步,是因为layui本来就没有准备支持或者还不在这个计划里面来支持这种表格中部分复选框不可选的功能,所以很多代码的逻辑简直是粗犷豪迈但是高效。对立面就是不够细腻,无法支持我们新加进去的功能,但是!!这个不能帅锅给组件,组件只能尽量的支持大众化。自己想要的效果源码实现不了了就得自己扩展,自己扩展的时候源代码的处理逻辑不能满足你扩展的方法的时候这个不能怪组件本身,所以还是得靠自己修改一些源代码逻辑来处理,当然这个是必须在保证不会对目前已有功能造成破坏性影响的基础上的,性能上要说完全不影响这个得看情况,如果高手的话可能还能写出效率更高的代码,但是一般来说像俺这样的估计是稍微有点增加消耗,因为加入了一些逻辑的处理,把以前粗犷高效的方式变得相对于我需要的功能是合理的尽量高效的逻辑代码。
废话了这么多最关键想说的是得改源码[汗]
修改地方1,checkStatus,添加了一个属性checkDisabled用来记录哪些字段是不可选择的,然后下面的判断逻辑也要稍微变化,是有选中的情况下再校验是否全选,主要处理的是,可能有一些页面全不可选择,原来的逻辑可能判定之后isAll就是true

修改地方2,syncCheckAll 添加了两个.last()的处理,主要在第二种方式templet的而且复选框是固定列的时候不知道为啥点击了之后这里两个元素中的第一个(不是固定列)的状态是false,导致出问题,找到跟他孪生的我们看到的在固定列上的节点就没问题,当然即使不是固定列,添加.last()去找以前的逻辑也不会有问题。

修改地方3,监听复选框选择的地方,红色框框下面被注释掉的就是以前的处理逻辑,加了last()和dataIndex的地方就是对应的以前粗犷豪迈的设置方法,在新需求面前就不太适合,不够细腻了,加了精确的去找到对应下标的数据,而不是全部一股脑按顺序加上选中状态。

记得就这3个主要的地方,应该没了,太晚了脑子有点不转了,有遗漏的明天再补充了。
更新于2018年7月3日08:18:18
一早起来脑子开始转的时候就意识到一个修改的错误地方了,图三的修改that.layBody.last()去找到复选框这个是不可取的,为什么不可取,这个得了解that.layBody是个啥,其实这个就是table的内容显示主体,还有固定块(左、右),所以本来想着找到实际的固定块去遍历就可以了,但是last肯定是不可取的,如果checkbox固定列在左,同时存在有固定列,那么就直接over了,所以想太多了,弄巧成拙,还是得去掉last(),直接that.layBody.find(复选框),这样会把实际的主体和固定列(如果有的话)中的[name="layTableCheckbox"]复选框都找到,逻辑就没问题了。
回帖