给 layui table 加上单选框

分享 已结 精帖
57 2670
luoye
luoye 2017-10-9
悬赏:20飞吻
有layui爱好者在社区里询问加单选框的方法,这里献丑一下,不喜勿喷。谢谢大家。有需要修改的地方可以指出来
地址: https://gitee.com/chemlzzx/layui-table-add-radio.git
下载table.js模块替换原来的table模块
具体使用可以参考示例页面1.htm

设置某一记录选中可以用
"LAY_RadioCHECKED": true
事件监听代码如下:
  table.on('radio(testtable)', function(obj){
//console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
});
上效果图
回帖
  • 帅气,说做就做,比神兽党强太多了,支持你,继续加油[威武]
    2 回复
  • luoye
    2017-10-11
    @Oswald 是单选框点击的时候获取选中行
     table.on('radio(testtable)', function(obj){
    //console.log(obj.checked); //当前是否选中状态
    console.log(obj.data); //选中行的相关数据
    });
    点击的时候传到后台修改设置(比如设置网站模板风格)

    没有另外用代码的方式获取选中行,要实现table.checkStatus('dataID'),需要在源码里在添加相应的功能
    1 回复
  • luoye
    2017-10-11
    @枫十四 在layui1.0.9的表格里,曾经加过点击行选中,后来想了想,又去掉了
    到了layui2.1.5 有单元格事件,就更不需要点击行选中了
    不过如果你需要这项功能的话,还是可以在页面另外实现的
    1 回复
  • 可以啊,小伙![good]
    0 回复
  • luoye
    2017-10-9
    谢谢夸奖,愧不敢当
    0 回复
  • 不错啊 ,支持
    0 回复
  • rocx
    2017-10-10
    不错,刚好用到
    0 回复
  • 漫游游
    2017-10-10
    相当不错,支持
    0 回复
  • 这个不错,赞
    0 回复
  • luoye
    2017-10-11
    [太开心][太开心] [太开心] [太开心] 又加精 又置顶 ,谢谢心姐,鄙人开心的不要不要的
    0 回复
  • luoye
    2017-10-11
    这一置顶好有压力啊,高处不胜寒啊
    0 回复
  • 小董
    2017-10-11
    @luoye 能不能做个合计?或者固定行
    0 回复
  • luoye
    2017-10-11
    @小董
    合计得自己写代码了。
    固定行要放在什么地方?
    0 回复
  • 小董
    2017-10-11
    固定行可以放在数据行和分页条的中间 设置一个属性能显示隐藏就好
    0 回复
  • luoye
    2017-10-11
    @小董 这个是可以的
    看这个帖子里 http://fly.layui.com/jie/16068/
    我的回帖 添加数据行就是可以显示和隐藏的
    0 回复
  • 小董
    2017-10-11
    嗯,看到了。我试试,要不要更新table.js? 我是2.1.2版本的
    0 回复
  • peng_yyn
    2017-10-11
    谢谢分享!
    0 回复
  • luoye
    2017-10-11
    @小董 我用的是2.1.5版本的
    table.render({
    elem: '#demo'
    ,done: function(res, curr, count){
    //添加行的代码写在这里的
    }
    0 回复
  • 小董
    2017-10-11
    @luoye 谢谢了
    0 回复
  • 小董
    2017-10-11
    0 回复
  • 李兴武
    2017-10-11
    [嘻嘻] 能不能说说怎么改的,我也的改过,该怎么合并?
    0 回复
  • Oswald
    2017-10-11
    有两个个问题请教一下作者。1.表头的那个radio是不是没用任何作用啊?我测试好像没用测试到它的作用。2.这个还可以用代码的方式获取选中行吗?[这个:table.checkStatus('dataID')]。我测试了这个方法好像也是不行,是需要如何使用或者设置吗?
    0 回复
  • 哥们儿,加一个点击行选中的开关怎么样...[馋嘴]
    0 回复
  • happyfhb
    2017-10-11
    真棒.....
    0 回复
  • luoye
    2017-10-11
    @枫十四
    比如
    css代码
    .otherbg{
    background-color: #999 !important;
    color:#fff!important;
    }
    js代码
      $(document).on("click",".layui-table-main tr",function() {
    $(this).toggleClass("otherbg");
    });
    0 回复
  • @luoye 谢谢,很有用!
    0 回复
  • IT狂人
    2017-10-11
    [哈哈]
    0 回复
  • Sooo
    2017-10-11
    赞~~~~~~~~
    0 回复
  • Dick
    2017-10-11
    单选框不是只可以选中一个radio吗?表头的全选radio什么逻辑呢?
    0 回复
  • luoye
    2017-10-11
    @Dick 表头的radio在源码里可以改成文字或者禁用。
    我设置它的意思是不想选下面任何一个的情况
    0 回复