给 layui table 加上单选框

分享 已结 精帖
88 4769
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); //选中行的相关数据
});
上效果图
回帖
  • 帅气,说做就做,比神兽党强太多了,支持你,继续加油[威武]
    3 回复
  • luoye
    2017-10-11
    @Oswald 是单选框点击的时候获取选中行
     table.on('radio(testtable)', function(obj){
    //console.log(obj.checked); //当前是否选中状态
    console.log(obj.data); //选中行的相关数据
    });
    点击的时候传到后台修改设置(比如设置网站模板风格)

    没有另外用代码的方式获取选中行,要实现table.checkStatus('dataID'),需要在源码里在添加相应的功能
    2 回复
  • 可以啊,小伙![good]
    1 回复
  • luoye
    2017-10-9
    谢谢夸奖,愧不敢当
    1 回复
  • 不错啊 ,支持
    1 回复
  • rocx
    2017-10-10
    不错,刚好用到
    1 回复
  • luoye
    2017-10-11
    @枫十四 在layui1.0.9的表格里,曾经加过点击行选中,后来想了想,又去掉了
    到了layui2.1.5 有单元格事件,就更不需要点击行选中了
    不过如果你需要这项功能的话,还是可以在页面另外实现的
    1 回复
  • luoye
    2017-10-11
    @Dick 表头的radio在源码里可以改成文字或者禁用。
    我设置它的意思是不想选下面任何一个的情况
    1 回复
  • luoye
    2017-11-23
    @sfgsg 没做,最新版的可以在数据表格里
    字段:
    ,{field: 'sex', title: 'radio',templet:"#radioTpl",unresize:true}
    模板
    <script type="text/html" id="radioTpl">
    <input type="radio" name="sexRadio" value="{{d.id}}" title=" " lay-filter="radiodemo" {{d.id=="10002"?"checked":""}}>
    </script>
    js代码
      form.on("radio(radiodemo)",function(obj) {
    layer.tips(this.value+" "+this.name+":"+obj.elem.checked,obj.othis);
    });
    1 回复
  • 漫游游
    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 回复
  • 真棒.....
    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 回复