layui table 点击行获取行数据并选中radio

强颜欢笑 提交于 2019-12-05 17:14:08
<table class="layui-hide" id="test" lay-filter="test"></table>

layui.use(['table','form'], function(){
  var table = layui.table;
  var $ = layui.jquery;
  var form = layui.form;
  table.render({
    elem: '#test'
    ,url:'yourSeverPath'
    ,cols: [[
	  {type: 'radio', title: '选择' ,fixed: 'left',},
      {field:'id', title:'ID', width:80, sort: true}
      ,{field:'username', title:'用户名', width:120}
      ,{field:'email', title:'邮箱', width:150, templet: function(res){
        return '<em>'+ res.email +'</em>'
      }}
      ,{field:'sex', title:'性别', width:80, sort: true}
      ,{field:'city', title:'城市', width:100}
      ,{field:'sign', title:'签名'}
      ,{field:'experience', title:'积分', width:80, sort: true}
      ,{field:'ip', title:'IP', width:120}
      ,{field:'logins', title:'登入次数', width:100, sort: true}
      ,{field:'joinTime', title:'加入时间', width:120}
    ]]
    ,page: true
  });
   
});

 方式一:


  //监听行单击事件(双击事件为:rowDouble)
  table.on('row(test)', function(obj){
    var data = obj.data;
    alert(JSON.stringify(data));
	//选中radio,适用于局部(单表)
    // obj.tr.find("input[lay-type='layTableRadio']").prop("checked",true);
	// form.render('radio');
    //标注选中样式
    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
  });

   //选中radio,适用于全局(多表)
   $('body').on('click', '.layui-table-body tr', function (e) {
	  $(this).find("input[lay-type='layTableRadio']").prop("checked",true);
	  form.render('radio');
   });

方式二(可以使用但不建议): 


  //监听行单击事件(双击事件为:rowDouble)
  table.on('row(test)', function(obj){
    var data = obj.data;
    alert(JSON.stringify(data));
    //标注选中样式
    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
  });

   $('body').on('click', '.layui-table-body tr', function (e) {
	  $('.layui-form-radio', this).click(); //此方法可以使用,但有缺陷会再触发一次行点击事件。
   });
   $('body').on('click', '.layui-form-radio', function (e) {
	 e.stopPropagation();
   });
  
});

建议使用方式一

方式二 有数据重复加载问题

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!