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

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

初始化代码:


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

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

取消部分不可选:


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

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

内部的实现逻辑

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

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

目前实际还存在的一些问题,就是是依附记录复选框状态的功能实现的,明天再调优一下,让它即使设置不跨页面记录状态的也能单独的使用部分不可选。(未完待续)
回帖
  • 花季岁月
    2018-11-30
    有个问题 第二页选中的数据 切换到第一页的时候就获取不到第二页选中的数据了
    9 回复
  • 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 回复
  • 1 回复
  • [微笑]
    0 回复
  • 日後再說
    2018-11-30
    你测试页面的隐藏列怎么做的刷新页面还能隐藏以前点击的.
    0 回复
  • @日後再說 这个也是tablePlug里面提供的一个拓展支持,提供一个配置项:colFilterRecord,可以设置true/false,主要的思路就是监听筛选的复选的选择,然后把状态记录到浏览器缓存中,同时支持是存session或者local的store,具体的细节在 关于 table 的 checkbox 跨页状态保存的一种实现方式 这个帖子里面有详细的描述
    0 回复
  • @花季岁月 你使用的是下面的laypage的组件切换页面的吗?上面有描述说了额,因为是用的测试的url指向一个json文件的,所以下面的分页组件基本是没用的,切换了还是这个json文件,要用上面的按钮去切换额,实际的开发中url不会是指向一个固定的这个json文件是一个实际的接口,就不存在这个问题的额。
    0 回复
  • 花季岁月
    2018-11-30
    @岁月小偷 ok 明白了
    0 回复
  • 小野心
    2018-11-30
    厉害![鼓掌]
    0 回复
  • @小野心 谢谢认可[微笑]
    0 回复
  • QQ糖
    2018-11-30
    @岁月小偷 大佬,又来打扰你了,[委屈] ,如果按时间查询,这一天没数据的话怎么让页面显示“无数据”呀而且不执行其他的命令了!!!
    0 回复
  • @静夜喧哗 你说的按照时间查询是?表格按照时间查询,然后没有数据的话再内部显示无数据是么?其他的命令指的是啥?不知道你说的其他命令具体指的是什么额,一般来说如果是跟table相关的,一般是在table的done回调里面做你说所的其他的命令,不知道是不是这个,如果是的话一般来说应该是根据done回调里面先检测是否有数据,有的话再执行你说的命令,如果没有就不执行。
    0 回复
  • tangtang
    2018-11-30
    11211
    0 回复
  • QQ糖
    2018-11-30
    @岁月小偷
    大神,无数据的时候界面这个样子,我想让他提示"无数据,无法加载表格"怎么写呀,写在哪里呀,是写在查询里面么
    0 回复
  • QQ糖
    2018-11-30
    @岁月小偷 我会了[挤眼]
    0 回复
  • @静夜喧哗 额,你这个的table呢?没看到你的table额,一般来说即使查不到数据应该也是把下面的表格显示出来,只不过内部显示的是无数据额,你的表格是怎么render的呢?里面是设置了url还是data? 如果是url,然后where条件根据上面的条件去查,返回没有数据的话自动的就显示无数据了,如果是data模式的,查询之后直接table.reload(tableId, {data: newData||[]})如果没有数据设置一个空的数组给data,那么它内部显示的也是无数据,你说的无数据是指table内部显示无数据还是什么地方呢?如果是其他的地方估计就是在回调里面直接操作dom节点,如果是table内部的就是上面提到的。
    0 回复
  • QQ糖
    2018-11-30
    @岁月小偷 这个表格比较难受,没用layui的这个表是自己写的,。。。对了大神,layui的table怎么设置其为必填项呀,还有设置其中某列为必须是数字,否则填补了,这该怎么写呀[囧]
    0 回复
  • @岁月小偷 layer.all.js 打开弹框关闭后不能隐藏啊 $(element)。
    如果 用 var $ = layui.$; 能解决 但是 其他地方用到 jq 插件不兼容啊 。这个layui 里面自带的 jq是
    那个版本啊。 还是阉割版的? 之前看到社区 2017 11月 有人问这个问题。 只能end:function(){}
    手动关闭吗。
    0 回复
  • @一只菜鸡 你说的情况是?弹出的是content设置一个dom对象,然后关闭的时候那个被打开的节点一般希望回到原先的隐藏的状态么?我这边实际很少是用这种形式,所以它内部的具体逻辑是什么样子的还不清楚,刚开始的时候试用过,但是限制太多用起来也麻烦,所以一般我都是打开的时候content设置成一个空的节点,然后在success回调里面再去对内容进行加载渲染之类的。
    0 回复
  • 这个还真不错
    0 回复
  • 安静哈
    2018-12-3
    厉害了[good] 有用
    0 回复
  • @安静哈 @Interesting21 谢谢认可[嘻嘻]
    0 回复
  • 安静哈
    2018-12-3
    楼主 有个问题 能问下?重载 搜索 使用button 加载了两次 使用a标签无用
    0 回复
  • 安静哈
    2018-12-3


    0 回复
  • 安静哈
    2018-12-3
    请问 有知道的吗 怎么解决啊
    $("#search").click(function() {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
    })
    0 回复
  • 你说的使用a无用是什么意思呢?点击没有搜索么?按钮点击有异常的一般来说常见的有两种可能,一种是这个按钮如果是在form表单里面,而且没有设置它的type默认是submit,点击之后监听里面没有return false;那么它所在的表单会提交,就会刷新页面,造成了感觉是加载了两次的感觉,不过具体是不是你遇到的现象还得看有没有更详细的描述,第二个可能的是是否出现事件重复绑定。具体得看下你这个按钮是怎么监听的在哪里reload的表格额
    0 回复
  • QQ糖
    2018-12-4
    @岁月小偷 大神求助,layui的table 怎么设置 某列 为必填项呀,还有设置其中某列必须是数字,如果不符填不了,这该怎么写呀[囧]
    0 回复