精华内容
下载资源
问答
  • layui table 表格选中行并改变样式,很多资源都写得很麻烦,所以直接上我开发中一个解决方法,不一定最好,但是我认为最简单。 这个适用于一个页面出现多个layui-table的情况,原因所在是:lay-fliter选择 代码...

    原因

    layui table 表格选中行并改变样式,很多资源都写得很麻烦,所以直接上我开发中的一个解决方法,不一定最好,但是我认为最简单。

    1. 这个适用于一个页面出现多个layui-table的情况,原因所在是:lay-fliter的选择
    2. 代码中有几个编号,重点关注(编号代码处都有注释,不再进行复述)
    3. 最后写了一个简单demo进行展示,并附有截图

    直接代码了

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>table test</title>
    		
    		<link rel="stylesheet" href="./layui/css/layui.css"  media="all">
    		<script src="./js/jquery-1.4.4.min.js" charset="utf-8"></script>
    		<script src="./layui/layui.js" charset="utf-8"></script>
    		
    		<style>
    			.table-tr-selected-bg{
    				/* 1. table默认是有背景色的你要保证优先加载你的,所以使用important */
    				background-color: #6189a7 !important;
    				color: #FFF;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<blockquote class="layui-elem-quote layui-text">layui table click</blockquote>
    			<!-- 2. lay-filter 注意,这是该操作的核心 -->
    			<table id="test" lay-filter="test-filter">
    				
    			</table>
    		</div>
    	</body>
    	<script type="text/javascript">
    
    		var element;
    		var table;
    		var layer;
    		
    		var json = [
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'},
    			{'username':'测试数据','sex':'男'}
    		]
    		
    		//3. 选择对应的模块进行加载,优化页面的加载速度
    		layui.use(['element', 'table', 'layer'], function(){
    		  element = layui.element;
    		  table = layui.table;
    		  layer = layui.layer;
    		  init_table();
    		});
    		  
    		  //4. 初始化页面的数据表格
    		  function init_table(){
    			table.render({
    			  elem: '#test'
    			  ,data: json
    			  ,cols: [[
    				{field:'username', width:'50%', title: '用户名'}
    				,{field:'sex', width:'50%', title: '性别', sort: true} 
    			  ]]
    			  ,page: true
    			});
    			
    			table.on('row(test-filter)',function(obj){
    				//5. 这就是你的选中行,直接操作
    				console.info(obj.tr);
    				/**先移除,在添加,流程不用质疑*/
    				$('.table-tr-selected-bg').removeClass('table-tr-selected-bg');
    				$(obj.tr).addClass('table-tr-selected-bg');
    				//6. 其他操作自定义即可
    				layer.msg(JSON.stringify(obj.data));
    			});
    		  }
    		
    	</script>
    </html>
    

    效果图

    在这里插入图片描述

    在这里插入图片描述

    结束

    文章为原创,转载请附载本文链接。

    展开全文
  • 17实现思路直接修改复选框选中状态和伪复选框(DIV)Class但是调用checkStatus获取不到选中的行查看底层源代码checkStatus方法的实现是缓存数据中的属性来判断是否选中所以循环缓存数据,用index找到操作数据修改,...

    2019年9月5日11:19:17

    实现思路

    直接修改复选框选中状态和伪复选框(DIV)Class

    但是调用checkStatus获取不到选中的行

    查看底层源代码checkStatus方法的实现是缓存数据中的属性来判断是否选中

    所以循环缓存数据,用index找到操作数据修改,再次获取选中行就可以获取到了

    table.on(‘row(test)‘,function(obj){

    var flag = !obj.tr.find(‘:checkbox:first‘).attr(‘checked‘);

    obj.tr.find(‘:checkbox‘).attr(‘checked‘,flag);

    if(flag){

    obj.tr.find(‘.layui-form-checkbox‘).addClass(‘layui-form-checked‘);

    }else{

    obj.tr.find(‘.layui-form-checkbox‘).removeClass(‘layui-form-checked‘);

    }

    layui.each(table.cache.userTable,function(i,l){

    if(obj.tr.index()==l.LAY_TABLE_INDEX){

    l.LAY_CHECKED=flag;

    }

    });

    });

    原文:https://www.cnblogs.com/wangfeii/p/11464726.html

    展开全文
  • layui的表格table中,选中数据之后更改本行颜色,取消选中后恢复原样式。在layui的表格table中,选中数据之后更改本行颜色,取消选中后恢复原样式。
  • layui获取选中行数据实例讲解发布时间:2020-08-30 02:54:43来源:脚本之家阅读:203第一步: 在jsp文件中设置按钮获取选中行数据获取选中数目验证是否全选第二步:在jsp文件中创建表格ID用户名性别城市签名积分...

    layui获取选中行数据的实例讲解

    发布时间:2020-08-30 02:54:43

    来源:脚本之家

    阅读:203

    第一步: 在jsp文件中设置按钮

    获取选中行数据

    获取选中数目

    验证是否全选

    第二步:在jsp文件中创建表格

    ID用户名性别城市签名积分职业财富评分

    第三步:写js,监听事件

    layui.use('table', function(){

    var table = layui.table;

    var $ = layui.$, active = {

    getCheckData: function(){ //获取选中数据

    var checkStatus = table.checkStatus('idTest')

    ,data = checkStatus.data;

    layer.alert(JSON.stringify(data));

    }

    };

    以上这篇layui获取选中行数据的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持亿速云。

    展开全文
  • table :var tableIns = table.render({elem:'#workTaskLogListTable',url: ctx+'/task/workTaskLog/query',error:admin.error,cellMinWidth: 80,toolbar: '#workTaskLogListTable-toolbar',defaultToolbar: [{title...

    table :

    var tableIns = table.render({

    elem:'#workTaskLogListTable'

    ,url: ctx+'/task/workTaskLog/query'

    ,error:admin.error

    ,cellMinWidth: 80

    ,toolbar: '#workTaskLogListTable-toolbar'

    ,defaultToolbar: [{

    title: '条件过滤' //标题

    ,layEvent: 'searchDiv' //事件名,用于 toolbar 事件中使用

    ,icon: 'layui-icon-search' //图标类名

    },

    'filter', 'print', 'exports']

    ,cols: [[

    {type: 'checkbox'/*, fixed: 'left'*/}

    ,{field:'content', title: '日志内容', align: 'center',width:130 }

    ,{field:'userName', title: '操作人', align: 'center',width:130 }

    ,{field:'status', title: '状态', align: 'center',width:130,templet:tplStatus}

    ,{field:'createTime', title: '创建时间', align: 'center',width:160,templet:tplCreateTime}

    ,{title:'操作', toolbar: '#workTaskLogListTable-bar', width:150}

    ]]

    ,page: true

    ,limit: 10

    ,limits: layui.setter.limits

    ,done: function(res, curr, count){

    }

    ,height: 'full-110'

    });

    说明:{type: 'checkbox'/, fixed: 'left'/} , 要是功能有效,即表的列 不能有fixed属性。

    调用方法:

    admin.tableRowCheckToggle();

    方法体为:

    admin.tableRowCheckToggle = function () {

    $('body').on('click', '.layui-table-body tr', function(e){

    $('.layui-form-checkbox', this).click();

    $('.layui-form-checkbox.layui-form-checked', this.parent).click();

    $('.layui-form-checkbox', this).click();

    })

    $('body').on('click', '.layui-form-checkbox', function(e){

    e.stopPropagation();

    })

    }

    展开全文
  • layui table有多行数据,通过外部输入内容,需要定位到指定选中改行,对改行进行操作。 实现效果: HTML代码: <body> <div class=layui-fluid> <input type=text id=txt_id /> <table class=...
  • layui 表格选中行同时选中复选框

    千次阅读 2019-03-22 09:20:29
    有2种实现方式,各有利弊 ...问题:layui的行点击事件不会触发了 $(document).on("click", ".layui-table-body table.layui-table tbody tr", function() { var index = $(this).attr('data-index'); var ta...
  • $(".layui-table-view[lay-id='这里是table表格的Id'] .layui-table-body tr[data-index=0] .layui-form-radio").click(); 将上面这就话写在done回调函数里面. data-index=0 表示第一. ...
  • 不操作页面,实现table表格checkbox选中功能 二、经过 刚开始思路: 1、通过table的id,找到table渲染时生成div,即table的下一个兄弟节点div.layui-table-view 2、由于checkbox是固定列,再通过第一步,...
  • layui table有多行数据,通过外部输入内容,需要定位到指定选中改行,对改行进行操作。 HTML代码: <body> <div class="layui-fluid"> <input type="text" id="txt_id" /> <table ...
  • 获取选中行数据</button> <button class=layui-btn data-type=getCheckLength>获取选中数目</button> <button class=layui-btn data-type=isAll>验证是否全选</button> 第二步:...
  • layui.table表格)跨页多选 layui版本:2.5.6 使用数据表格时可能会需要在翻页时保留各个页面选中的信息,效果如下。 实现思路,1.选中的时候刷新全选框状态 2.全选/全不选的时候刷新勾选框状态 3.翻页后刷新...
  • layui.table(表格)跨页多选

    千次阅读 2019-07-19 16:09:39
    使用数据表格时可能会需要在翻页时保留各个页面选中行的信息,效果如下。 效果演示 实现思路 实现思路大致分为以下三步 1.定义两个全局变量用于保存选中行的id,以及当前页所有行的id(全选时使用) 2.监听表格复选...
  • layui table单选框选中事件

    千次阅读 2018-10-24 11:44:43
    其中demo为表格tablelay-filter 单选框选中事件监听: table.on(‘radio(demo)’, function(obj){ //查看obj结构 // console.log(obj); //是否选中选中为true // console.log(obj.checked); //...
  • table : var tableIns = table.render({ elem:'#workTaskLogListTable' ,url: ctx+'/task/workTaskLog/query' ,error:admin.error ,cellMinWidth: 80 ,toolbar: '#workTaskLogListTable-toolbar' ,...
  • layui数据表格选中行高亮显示,并传递被选中行的数据 直接上改代码 //定义一个全局变量 var tmpobj=null; //定义一个全局要传递id,方便取值 var uuid= ' ' ; //监听单击事件 table.on('row(jf_company_...
  • $(document).on(“click”,".layui-table-body table.layui-table tbody tr",function(){ var tr = $(this); //从哪开始选中 var numth = $(tr).attr(“data-index”); var trd = $(".layui-table-main tr[data...
  • 有一个这样的业务需求,就是当layui table中某页的数据被用户选中完以后,用户切换到下一页浏览,然后再返回到该页面的时候,之前选中的数据应该保持选中的状态。 全局变量ck_Ids: var ck_Ids=[];//存储的表格数据...
  • layui表格中,点击事件同时选中行前单选框。 //表格监听单击事件 table.on('row(test)', function(obj) { //选中行前radio Table.isCheckRadio(obj, form, table, 'tableReload'); //这是我操作。。...
  • 3 个需求勾选后台返回来的数据进行操作根据后台的打 √ 集合来进行勾选实现禁用只查看的功能解决方案使用饿了么 UI 的表格用到的方法select 当用户手动勾选数据的 Checkbox 时触发的事件 selection, rowselect-all...
  • layui 表格点击实现CheckBox的选中与取消 1、先引入layui相关的插件 2、在定义表格的地方 设置 lay-filter 属性,注意了这个属性的名称需要跟表格id一致 <table id="tableBigType" lay-filter="tableBigType" ...
  • table.on('checkbox(table-id)', function(obj){ console.log(obj.checked);... //选中行的相关数据 console.log(obj.type); //如果触发是全选,则为:all,如果触发是单选,则为:one console.log(ta...
  • 1.Layui数据表格单击一行选中复选框(每次只选中一项复选框) $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var ...
  • 我是叨叨君~说起制作表格可不是Excel专利,日常工作中,用Word制作表格也是常有事儿,对于有些小伙伴来说,可能天天都要用,那么,用Word制作表格,有哪些技巧是我们必须要掌握呢?今天叨叨君就来分享word中10...
  • 1、table单击tr勾选checkbox功能: ... $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents

空空如也

空空如也

1 2 3 4
收藏数 73
精华内容 29
关键字:

layuitable选中的表格的行