表格实现部分复选框不能选中的一种实现方式(in tablePlug)

分享 已结 精帖 143 8346
岁月小偷
悬赏:80飞吻
这个效果以前也发过一个帖子,感兴趣有时间可以找找看一下,对了解table内部的逻辑多多少少会有帮助。这个功能整合到tablePlug是较久之前的计划了,不过最近项目忙,零零散散的时间终于整的差不多了,发出来套路下,思路跟上次的有一些不同。
先上效果:
初始化设置部分不可选

初始化代码:


js修改一个表格不能选的记录:

动态设置不能选的记录的代码:

取消部分不可选:


如果选中了设置成不能操作的,被取消操作的复选框的状态就“固定”下来了,也就是说disabled的时候它是选中的后面不管怎么操作就是选中的,不选中的也是,不会因为点击或者点击了全选框就改变。这个也是一个关键的,既是否选中跟是否可选是两码事而且必须区分开,既设置了部分不可选了,后面操作全选的时候判断当前页是否“全部选中”这个应该就不能把不能选的算在内。

功能也比较简单,效果基本如上所说,唯一一个比较容易混的就是是否可选跟是否选中的关系,其他的应该都好理解。下面说说实现的思路。
首先table内部是没有这个支持的,(这个有点废话,要不然也不需要自己拓展了[偷笑] )所以内部的一些逻辑比较简单粗暴,在没有部分不可选的前提下是没有问题的,但是如果加入了这个需求,以前的逻辑导致一些问题,即使你自己通过一些手段,把页面上的checkbox给disabled掉,但是你会发现它点击全选的时候还是会选上。即使你把这些节点都remove掉,点击全选之后,后面用table.checkStatus的时候还是会把那些不可选中记录给得到,所以还是得做更多细致的处理,至于我说的相关的简单粗暴的地方可以具体卡卡那以前的这个帖子: 一个简单table的checkbox单选实现思路 的后半部分。
实际这个帖子虽然从实现方式上来说跟以前的不一样,不是直接修改源码实现,但是实际要解决的问题其实一样,只不过途径不同而已。
要解决的问题:
1,在适当的时候将不可选的记录的复选框设置为不可选的,这个可以在js调用一下,更常用的应该是render的时候就指定部分记录不可选了,后面不需要关心,交给tablePlug来处理,主要的地方是这:

内部的实现逻辑

2,设置了不可选之后后面点击全选框如何让他们不被影响。这次的方法比较“怪”,是先不管table内部的逻辑,而是在checkbox回调里面再把他们调整回他们应该有的状态,。

3,修改checkStatus内部逻辑修改它判断是否全选的这个算法。

目前实际还存在的一些问题,就是是依附记录复选框状态的功能实现的,明天再调优一下,让它即使设置不跨页面记录状态的也能单独的使用部分不可选。(未完待续)
回帖
  • sasala
    2019-1-4
    @岁月小偷 嗯,我也是猜想应该是全选的方法其实是写死获取全部的,所以我在获取的数据里面做了一下处理就可以了,谢谢啦
    0 回复
  • 花季岁月
    2018-11-30
    有个问题 第二页选中的数据 切换到第一页的时候就获取不到第二页选中的数据了
    10 回复
  • goldsim
    2018-11-29
    [赞]
    6 回复
  • 嗯嗯,看着比较可疑的是你后面这段代码是在哪里执行的?应该是多次绑定事件了

    可以先unbind('click')然后再click:
    $("#search").unbind('click').click(function() {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
    });
    试试看额
    4 回复
  • 1 回复
  • 日後再說
    2018-11-30
    @岁月小偷 谢谢哈
    1 回复
  • QQ糖
    2018-11-30
    @岁月小偷
    大神,无数据的时候界面这个样子,我想让他提示"无数据,无法加载表格"怎么写呀,写在哪里呀,是写在查询里面么
    1 回复
  • QQ糖
    2018-12-7
    @岁月小偷 [哈哈] 看来这个“比较经典”是真的,谢谢老师!![给力]
    1 回复
  • 1 回复
  • [微笑]
    0 回复