精华内容
下载资源
问答
我要提问

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

     2020-10-18 04:59:29
    今天小编就为大家分享一篇layui获取选中行数据的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui table 多行删除(id获取)的方法
    
                                    
                                2020-10-16 10:20:08
                            
    
                            
    
                                
    
                                    今天小编就为大家分享一篇layui table 多行删除(id获取)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui的表格table选中数据后更改本行的颜色
    
                                    
                                2018-10-17 11:54:43
                            
    
                            
    
                                
    
                                    在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    LayUI Table选中行颜色设置
    
                                    
                                2021-07-15 11:43:16
                            
    
                            
    
                                
    
                                    1.CSS   .success {  background-color: #dff0d8; }  2.监听行单击事件 ... table.on('row(datafilter)', function (obj) {//datafilter是table的lay-filter属性 ... //去除之前选中的行的，选中样式  $(obj.tr).addCl
                                
    
                                
    
                                    
    
                                        
    1.CSS
     

    .success
{
    background-color: #dff0d8;
}
     

    2.监听行单击事件
     

    
            table.on('row(datafilter)', function (obj) {//datafilter是table的lay-filter属性
                $('.success').removeClass('success'); //去除之前选中的行的，选中样式
                $(obj.tr).addClass('success'); //添加当前选中的 success样式用于区别
            });
     

    当然，如果同一个页面存在多个table，也可以通过操作不同的样式来实现。行点击事件也可以做别的操作。
    
                                    
    
                                    
    收起 
    
                                
    
                                        
                                            展开全文
                                            
                                        
                            
    
                                
    
                                    
                                        html   
                                        jquery   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox
    
                                    
                                2021-01-06 14:47:18
                            
    
                            
    
                                
    
                                    layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui table 表格选中改变当前行样式
    
                                    
                                    
                                            千次阅读
                                    
                                2020-11-12 09:24:08
                            
    
                            
    
                                
    
                                    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>

     

    效果图
     

    在这里插入图片描述
     

    在这里插入图片描述
     

    结束
     

    文章为原创，转载请附载本文链接。
    
                                    
    
                                    
    收起 
    
                                
    
                                        
                                            展开全文
                                            
                                        
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui默认选中table的CheckBox复选框方法
    
                                    
                                2020-10-16 08:55:40
                            
    
                            
    
                                
    
                                    今天小编就为大家分享一篇layui默认选中table的CheckBox复选框方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui使用表格渲染获取行数据的例子
    
                                    
                                2020-10-16 09:59:58
                            
    
                            
    
                                
    
                                    今天小编就为大家分享一篇layui使用表格渲染获取行数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui table默认选中指定行
    
                                    
                                2021-05-13 09:53:45
                            
    
                            
    
                                
    
                                    done: function (res, curr, count) {  tableData = res.data;  $("[data-field='id']").css('display', 'none');  var data = res.data;  var num = 0;
                                
    
                                
    
                                    
    
                                        
    done: function (res, curr, count) {
                            tableData = res.data;
                            $("[data-field='id']").css('display', 'none');
                            var data = res.data;
                            var num = 0;
                            for (var i = 0; i < data.length; i++) {
                                if (ExamStudentArray.indexOf(data[i].id) != -1) {
                                    num++;
                                    var index = data[i]['LAY_TABLE_INDEX'];
                                    $('#examPlanForm tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                    $('#examPlanForm tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                }
                            }
                            var limit = $(".layui-laypage-limits").find("option:selected").val(); //分页数目
                            if ((num == limit || num == count) && count > 0) {
                                $('#examPlanForm .layui-table-header table.layui-table thead th input[type="checkbox"]').prop('checked', true);
                                $('#examPlanForm .layui-table-header table.layui-table thead th input[type="checkbox"]').next().addClass('layui-form-checked');
                            }
                            form.render();
                        }

     

    参考自：https://www.cnblogs.com/xiaonangua/p/10769630.html
    
                                    
    
                                    
    收起 
    
                                
    
                                        
                                            展开全文
                                            
                                        
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui的表格table选中数据后可打印本行数据
    
                                    
                                2018-10-26 11:30:50
                            
    
                            
    
                                
    
                                    layui的表格table选中数据后可打印本行数据,未打印时不显示，只在打印页面显示打印内容。只是做了一个简单的demo，页面需要自己去画，方法已实现。有具体的指导步骤
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui table动态选中_layui后台管理—table 数据表格详细讲解
    
                                    
                                2020-11-21 05:12:11
                            
    
                            
    
                                
    
                                    1.layui介绍layui是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS 的书写与组织形式...2.table 数据表格在进行代码编译之前，还是需要引入layui框架，在git中下载dist文件夹。（网址：https://github...
                                
    
                                
    
                                    
    
                                        
    
 
    
 
    
  8afdc5f3e66cf7a05f4bdd04b54e48bb.png
 
    
 
    1.layui介绍
    
 
    layui是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用，非常适合界面的快速开发。layui区别于那些基于MVVM底层的UI框架，不需要各种前端工具的复杂配置，只需面对浏览器本身。
    
 
    2.table 数据表格
    
 
    在进行代码编译之前，还是需要引入layui框架，在git中下载dist文件夹。
    
 
    （网址：https://github.com/sentsin/layui）
    
 
    table数据表格是layui最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，支持固定表头、固定行、固定列，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持复选框，支持分页，支持单元格编辑等等一些列功能。
    
 
    
 
    
  63e40e93ffd9becd21a434163daddf26.png
 
    
 
    2.1 数据表格基础参数
    
 
    
 
    
  7d37a9462e31087b10cb35c87e89b549.png
 
    
 
    2.1 数据表格表头基础参数
    
 
 程序员的一切：学习前端，你掌握这些。二线也能轻松拿8K以上​zhuanlan.zhihu.com
 
    
  3620c9019ea5f5e4495fa09868bcf691.png
 
    
 
    2.1直接赋值数据的表格
    
 
    layui框架在一些用法上是与bootstrap框架类似的，都是使用了封装样式。创建一个table实例最简单的方式是：在页面放置一个元素<tableid="demo"></table>，然后通过table.render()方法指定该容器。还可以利用skin,even、size进行数据表格的样式调整。具体参数名和可选值见下图
    
 
    2.3数据表格样式。
    
 
    
 
    
  774104165c2982616ecf11a736abd57a.png
 
    
 
    图2.3 数据表格样式
    
 
    具体代码如下（其中表格数据中的部分代码已省略）：
    
 
    
  
    <
    
 
    
 
    效果图如下：
    
 
    
 
    
  123dffe419bd05a0d24c5f27313e2b78.png
 
    
 
    图2.4 效果图
    
 
    2.2利用接口填充表格数据
    
 
    这里只需在利用url接口就可以实现，data数据就可以不写，只需要利用cols显示标题栏就可以了，效果如图2.4。代码如下：
    
 
    
  
    table
    
 
    
 
    2.3合并表格行或列
    
 
    合并单元格的方法和HTML中其实是一样的，都是利用rowspan="2"，colspan="3"进行合并。代码如下：
    
 
    
  
    <
    
 
    
 
    效果如下：
    
 
    
 
    
  6454d7491a5725c1a2755b909f96bf4e.png
 
    
 
    图2.5 效果图
    
 
    更多学习内容请阅读我的知乎专栏： 
    
 
 程序员的一切：打造全网web高级前端工程师资料库（总目录）看完学的更加快，知识更牢固。你值得拥有（持续更新）~​zhuanlan.zhihu.com
 
    
  ec6130ffd39ab99424e65b9513dd12ea.png
 
    

    
                                    
    
                                    
    收起 
    
                                
    
                                        
                                            展开全文
                                            
                                        
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui-table获得当前行的上/下一行数据的例子
    
                                    
                                2020-10-16 08:12:33
                            
    
                            
    
                                
    
                                    今天小编就为大家分享一篇layui-table获得当前行的上/下一行数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui问题之模拟table表格中的选中按钮选中事件的方法
    
                                    
                                2020-12-13 14:44:10
                            
    
                            
    
                                
    
                                    不操作页面，实现table表格中的checkbox选中功能 二、经过 刚开始的思路： 1、通过table的id，找到table渲染时生成的div，即table的下一个兄弟节点div.layui-table-view 2、由于checkbox是固定列，再通过第一步，...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Layui Table数据行单击设置选中
    
                                    
                                    
                                            千次阅读
                                    
                                2020-03-06 13:51:10
                            
    
                            
    
                                
    
                                    Layui Table点击行时选中复选框   $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {  var index = $(this).attr('data-index');  var tableBox = $(this).parents('.layui-...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui 监听表格复选框选中值的方法
    
                                    
                                2020-10-18 05:31:07
                            
    
                            
    
                                
    
                                    今天小编就为大家分享一篇layui 监听表格复选框选中值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Layui数据表格之获取表格中所有的数据方法
    
                                    
                                2020-10-18 05:02:48
                            
    
                            
    
                                
    
                                    今天小编就为大家分享一篇Layui数据表格之获取表格中所有的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    获取layui中table表选中行数据
    
                                    
                                2021-06-03 10:23:14
                            
    
                            
    
                                
    
                                    获取layui中table表选中行数据 在使用layui来编写前端时，将数据加载到表格后，当需要对表格中某一行或几行数据进行操作时有以下两种简单方法。 法一 table表中每一列后面存在操作按钮，点击按钮进行列操作 法一的表...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        tablet   
                                        html   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui table 点击行选中
    
                                    
                                    
                                            千次阅读
                                    
                                2019-02-23 14:44:33
                            
    
                            
    
                                
    
                                    $(document).on("click"....layui-table-body table.layui-table tbody tr",function(){ 	 var obj = event ? event.target : event.srcElement; 	 var tag = obj.tagName; 	 var ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    如何获取layui表格选中行的数据
    
                                    
                                    
                                            万次阅读
                                    
                                2019-07-27 11:18:57
                            
    
                            
    
                                
    
                                    开发工具和关键技术：Visual Studio 2015，layui插件、JavaScript  作者：金建勇  撰写时间：2019年7月26日  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  在项目中有很多涉及到表格的模块，有时候当你需.....
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui多table点击行改变选中行颜色
    
                                    
                                    
                                            千次阅读
                                    
                                2020-10-28 14:36:20
                            
    
                            
    
                                
    
                                    layui多table点击行改变选中行颜色 			var currentPriceList; 			//点击事件 			table.on('row(table-currentPriceList)', function (obj) { 				currentPriceList = obj.data; 				$('div[lay-id="table-...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        js   
                                        html   
                                        javascript   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui.table表格渲染后判断checkbox多选控件是否可用
    
                                    
                                2019-02-21 17:29:37
                            
    
                            
    
                                
    
                                    该资源主要应用于layui框架下table表格渲染后判断checkbox多选控件是否可用，当然done下还可以做其他逻辑判定，附上源码，绝对可用。
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui表格选中行高亮
    
                                    
                                2020-11-30 15:53:34
                            
    
                            
    
                                
    
                                    table.on('row(patientInfoTable)', function (obj) {  obj.tr.addClass('layui-bg-green').siblings().removeClass('layui-bg-green');  });
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui table 点击行时选中 单选框
    
                                    
                                    
                                            千次阅读
                                    
                                2020-07-17 20:21:28
                            
    
                            
    
                                
    
                                    table.on('tool(tableZyry)', function (obj) {  obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click')  obj.tr.find('div.layui-unselect.layui-form-radio')[1].click();  }
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui的table单击行勾选checkbox功能方法
    
                                    
                                2020-10-18 05:24:21
                            
    
                            
    
                                
    
                                    今天小编就为大家分享一篇layui的table单击行勾选checkbox功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui table动态选中_笔记-layui选项卡
    
                                    
                                2020-11-20 23:43:59
                            
    
                            
    
                                
    
                                     卡片面板 ​ 相关样式 ​ layui-row 代表一行 ​ |- layui-col-space0 -- layui-col-space30 设置面板之间的间距，取值越大，间距越大 ​ |- layui-col-md0 -- layui-col-md12 代表每一个面板占用多少份，默认一行...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    layui table 复选框跳页后再回来保持原来选中的状态demo
    
                                    
                                2019-04-13 17:31:32
                            
    
                            
    
                                
    
                                    layui table 复选框跳页后再回来保持原来选中的状态相关的源码
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Layui表格选中指定行的radio单选框并滚动到该行的实现代码
    
                                    
                                2020-12-28 16:21:32
                            
    
                            
    
                                
    
                                    layui table有多行数据，通过外部输入内容，需要定位到指定行，选中改行，对改行进行操作。 实现效果：  HTML代码：  <body>  <div class=layui-fluid>  <input type=text id=txt_id />  <table class=...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    【Layui】------ Layui Table 点击行选中示例代码
    
                                    
                                    
                                            千次阅读
                                    
                                2019-01-11 11:08:46
                            
    
                            
    
                                
    
                                    layui table 点击行选中实例      //单击行勾选checkbox事件  $(document).on("click", ".layui-table-body table.layui-table tbody tr", function () {  var index = $(this).attr('data-index');  var tab...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        20 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    1,707
            

            

                精华内容
                    682
            

        

        

            
热门标签

            
        


        


        

            关键字：
layuitable选中的表格的行