精华内容
下载资源
问答
  • 今天小编就为大家分享一篇layui获取选中行数据的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui table 多行删除(id获取)的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui表格table中,选中数据之后更改本行颜色,取消选中后恢复原样式。在layui表格table中,选中数据之后更改本行颜色,取消选中后恢复原样式。
  • 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,也可以通过操作不同的样式来实现。行点击事件也可以做别的操作。

    展开全文
  • layui table中的列为checkbox 使layuitable表格中的列单元格显示为单选框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复选框方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui使用表格渲染获取数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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选中数据后可打印本行数据,未打印时不显示,只在打印页面显示打印内容。只是做了一个简单的demo,页面需要自己去画,方法已实现。有具体的指导步骤
  • 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获得当前的上/下一数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 不操作页面,实现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 监听表格复选框选中值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇Layui数据表格之获取表格中所有的数据方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 获取layuitable选中行数据 在使用layui来编写前端时,将数据加载到表格后,当需要对表格中某一或几行数据进行操作时有以下两种简单方法。 法一 table表中每一列后面存在操作按钮,点击按钮进行列操作 法一的表...
  • 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日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 在项目中有很多涉及到表格的模块,有时候当你需.....
  • layuitable点击改变选中行颜色

    千次阅读 2020-10-28 14:36:20
    layuitable点击改变选中行颜色 var currentPriceList; //点击事件 table.on('row(table-currentPriceList)', function (obj) { currentPriceList = obj.data; $('div[lay-id="table-...
  • 该资源主要应用于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(); }
  • 今天小编就为大家分享一篇layuitable单击勾选checkbox功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 卡片面板 ​ 相关样式 ​ layui-row 代表一 ​ |- layui-col-space0 -- layui-col-space30 设置面板之间的间距,取值越大,间距越大 ​ |- layui-col-md0 -- layui-col-md12 代表每一个面板占用多少份,默认一...
  • layui table 复选框跳页后再回来保持原来选中的状态相关的源码
  • layui table有多行数据,通过外部输入内容,需要定位到指定选中改行,对改行进行操作。 实现效果: HTML代码: <body> <div class=layui-fluid> <input type=text id=txt_id /> <table class=...
  • 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选中的表格的行