layui表格鼠标移入时显示最后一列

最新推荐文章于 2022-08-16 10:53:45 发布
最新推荐文章于 2022-08-16 10:53:45 发布
阅读量780 收藏
点赞数
分类专栏： 第三方-layer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongsdh/article/details/103385324
版权

前言：做法，显示最后一列的时候，重置每一列的位置

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/layui.css"/>
	<style>
		.layui-table[lay-even] tr:nth-child(even){
			background:#fff;
		}
		.layui-table-view .layui-table td{
			font-size: 16px;
			border-right: 0;
		}
		.layui-table-view .layui-table th{
			border-right: 0;
		}
		.layui-table-box, .layui-table-view { overflow:visible }
		.layui-table-box{overflow:visible}
		.layui-table-header{overflow:visible}
		.layui-table-view .layui-table{overflow:visible;width: calc(100% - 1px);}
		.layui-table-body{overflow:visible}
		.layui-table tbody tr:hover{
			background: #fff;
		    box-shadow: #666 0px 0px 10px;
		    transform: scale(1.028,1.05) translateX(-1px);
		}
		.layui-table-cell{padding: 0;}
		/*.laytable-cell-1-0-7{
			padding: 0;
			width: 0;
		}*/
		.layui-table tbody tr:hover .laytable-cell-1-id{
			width: 46px;
		    position: absolute;
		    top: 4px;
		    left: -7px;
		}
		.layui-table tbody tr:hover .laytable-cell-1-username{
			width: 46px;
		    position: absolute;
		    top: 4px;
		    left: -7px;
		}
		.layui-table tbody tr:hover .laytable-cell-1-email{
			width: 46px;
		    position: absolute;
		    top: 4px;
		    left: -7px;
		}
		.layui-table tbody tr:hover .laytable-cell-1-sign{
			width: 46px;
		    position: absolute;
		    top: 4px;
		    left: -48px;
		}
		.layui-table tbody tr:hover .laytable-cell-1-sex{
			width: 46px;
		    position: absolute;
		    top: 4px;
		    left: -78px;
		}
		.layui-table tbody tr:hover .laytable-cell-1-city{
			width: 46px;
		    position: absolute;
		    top: 4px;
		    left: -92px;
		}
		.layui-table tbody tr:hover .laytable-cell-1-experience{
			width: 46px;
		    position: absolute;
		    top: 4px;
		    left: -202px;
		}
		.layui-table tbody tr:hover .laytable-cell-1-8{
			width: 220px;
		    position: absolute;
		    top: 4px;
		    right: 20px;
		}
		.layui-table-view .layui-table td .laytable-cell-1-8{
			width: 0;
		}
		//按钮
		.box .choosebtn{
		    margin: 0;
		    color: #D60B0D;
		    background: transparent;
		    border-radius: 0;
		    border-right: 1px solid #D60B0D;
		    font-size: 16px;
		    height: 22px;
		    line-height: 22px;
		    transform: translate3d(0,0,0);
		}
		.box .choosebtn:last-child{border: 0;}
	</style>
</head>
<body>
	<div class="box" style="margin: 30px;width: 950px;">
		<table class="layui-hide" id="demo" lay-filter="demo"></table>
	</div>
	<button class="jsbtn">获取全部选中项</button>
	<script type="text/html" id="barDemo">
	  <button type="button" class="layui-btn layui-btn-xs choosebtn" lay-event="btn1">查看</button>
	  <button type="button" class="layui-btn layui-btn-xs choosebtn" lay-event="btn2">编辑</button>
	  <button type="button" class="layui-btn layui-btn-xs choosebtn" lay-event="btn3">发布</button>
	  <button type="button" class="layui-btn layui-btn-xs choosebtn" lay-event="btn4">删除</button>
	</script>
	<script src="jquery.min.js"></script>
	<script src="layui.all.js"></script>
	<script>
		layui.use('table', function(){
		  var table = layui.table;
		  
		  //展示已知数据
		  table.render({
		    elem: '#demo'
		    ,cols: [[ //标题栏
		      {type:'checkbox'}
		      ,{field: 'id', title: 'ID',unresize:true, width: 80,align:'center'}
		      ,{field: 'username', title: '用户名',unresize:true, align:'center'}
		      ,{field: 'email', title: '邮箱',unresize:true, align:'center'}
		      ,{field: 'sign', title: '签名',unresize:true, align:'center'}
		      ,{field: 'sex', title: '性别',unresize:true, align:'center'}
		      ,{field: 'city', title: '城市',unresize:true, align:'center'}
		      ,{field: 'experience', title: '积分',unresize:true, width: 80,align:'center'}
		      ,{toolbar: '#barDemo', title: '操作',unresize:true,width:0.01,align:'center'}
		    ]]
		    ,data: [{
		      "id": "10001"
		      ,"username": "杜甫"
		      ,"email": "www"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰"
		      ,"experience": "116"
		      ,"ip": "192"
		      ,"logins": "108"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10002"
		      ,"username": "李白"
		      ,"email": "www"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰"
		      ,"experience": "116"
		      ,"ip": "192"
		      ,"logins": "108"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10003"
		      ,"username": "王勃"
		      ,"email": "www"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰"
		      ,"experience": "116"
		      ,"ip": "192"
		      ,"logins": "108"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10004"
		      ,"username": "贤心"
		      ,"email": "www"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰"
		      ,"experience": "116"
		      ,"ip": "192"
		      ,"logins": "108"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10005"
		      ,"username": "贤心"
		      ,"email": "www"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰"
		      ,"experience": "116"
		      ,"ip": "192"
		      ,"logins": "108"
		      ,"joinTime": "2016-10-14"
		    }]
		    ,done : function(res, curr, count){
		       $('th').css({'background':'#F7F9FF'})
		       $('th').css({ 'font-size': '16px','color':'#3A3A3A'})
		    }
		  });
		  table.on('tool(demo)', function(obj){
		    var data = obj.data;
		    if(obj.event == 'btn1'){
		    	console.log('查看');
		    }else if(obj.event == 'btn2'){
		    	console.log('编辑');
		    }else if(obj.event == 'btn3'){
		    	console.log('发布');
		    }else if(obj.event == 'btn4'){
		    	console.log('删除');
		    }
		  });
		  
		});
		$("body").on("click",".jsbtn",function(){
		  var checkStatus = layui.table.checkStatus('demo').data;
		  console.log(checkStatus);
		})
	</script>
</body>
</html>

 

效果 

dongsdh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LayUI之table数据表格获取行、行高亮等相关操作
aipeng6550的博客
04-11 1579
前言 目前LayUI数据表格既美观有不乏一些实用功能。基本上表格应有的操作已经具备，LayUI作者【贤心】肯定是煞费苦心去优化，此处致敬。但是实话实话，如果单纯那数据表格功能来说，EasUI的数据表格更能更加强大、更加灵活，怎奈于丑的没法说，当然可以美化，但是成本太高了。我相信在后续的LayUI版本更新中，作者应该会着重优化数据表格，因为作为一个前端框架，美观度、效率相关、...
layui实现鼠标移动到单元格上显示数据的方法
10-16
今天小编就为大家分享一篇layui实现鼠标移动到单元格上显示数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui table 无数据时，最后一列会有空白，与表格对不齐
weixin_44246487的博客
04-29 3872
layui table 当表格中没有数据的时候，最后一列会有一块留白 解决方法： 表格数据加载完成后，把表格的宽度设置为100%就ok了。 done: function (res, curr, count) { $('.layui-table').css("width","100%"); $("th[data-field='bar']").css("border-right",'none...
layui点击table表格的每一格时显示相应的内容
weixin_30596735的博客
05-21 382
1 $(document).on('click','.layui-table-cell',function(){ 2 // $("p").css({"background-color":"blue","font-size":"14px"}); 3 var x=$(this).offset(), 4 left=x.left, ...
关于Layui table删除当前页最后一条数据不返回到上一页
小刘的博客
08-10 588
其实你只要在table.render()方法里面这样写 ,done:function(res, curr){ var brforeCurr = curr; // 获得当前页码 var dataLength = res.data.length; // 获得当前页的记录数 var count = res.count; // 获得总记录数 if(dataLength == 0 && count != 0){ //如果当前页的记录数.
msql实战优化（一）用leftjoin 代替notin 或notexists
牧码人博客@luckyhe.com
09-10 1181
文章目录优化背景业务需求分析总结 《 msql实战优化（一）用leftjoin 代替notin 或notexists》首发牧马人博客转发请加此提示 优化背景 header表:100w数据量，并且表结构有265个字段。（祖传表设计不想吐槽） line表：行数据明细,数据量90w。(每一条明细有个个headerid关联了header表) rule表：规则表，小量数据。 所有关键字段都建了索引。如果没有索引这样的数据量会慢的跟蜗牛一样。 业务需求 我要取得与line表中业务规则为rule表的所有header数据。
layui 实现表格某一列显示图标
10-16
今天小编就为大家分享一篇layui 实现表格某一列显示图标的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui 表格操作列按钮动态显示的实现方法
10-16
今天小编就为大家分享一篇layui 表格操作列按钮动态显示的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Layui数据表格显示无数据提示的问题
10-16
今天小编就为大家分享一篇解决Layui数据表格显示无数据提示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Layui杂谈】table.cache[‘‘]获取表格当前页的所有行数据的问题
我的一些代码。。。
06-02 5787
（layui 2.6.0 开始新增） //用于获取表格当前页的所有行数据 > table.getData(id);
layui-table获得当前行的上/下一行数据的例子
12-13
此方法主要是获得Layui当前行数据的上一行数据，或者下一行数据,os旧的jquery选择器 se选择器 nse新的jquery选择器 /** * * @param obj layui-table的行数据对象 * @param number 要查找的行距离当前行距离，以当前行为准向上一行为-,向下为+ * @param filedName 要查找的filed * @returns {string} 查找filed的值 */ function getRowData(obj, number, filedName) { var se = obj.tr.selector; var
关于layui 数据表格实现鼠标移动到单元格上显示动态数据的方法 多重条件判断 自定义模板【亲测有效】
Khun_HWJ的博客
11-17 1358
<script id="status" type="text/html"> {{# if(d.store_service_status == 0){ }} {{# if(d.vip_status == 0){ }} <div style="color:red"><span title="非会员用户" style="display:block;"><i class="tipss" style="background:red;"></i>
判断当前table中的tr是不是最后一行
一码一砖,铸就大厦;
06-11 4467
修改项目中的一个功能：
layui使用表格渲染获取行数据
热门推荐
l-jobs的专栏
08-28 1万+
需求：使用前端框架layui生成表格，点击表格中一行数据中的按钮，获取到这行数据。 解决办法： 在render中增加字段： done: function (res, curr, count) { // $('.x-body').find('.layui-table-body').find("table").find("tbody").children("...
Layui 动态表格无缝循环滚动的实现
wang_390486690的专栏
09-27 4940
// 表格滚动器 function TableScroller(tableContainer, interval) { // 响应鼠标事件 let that = this; tableContainer.on('mouseover', function () { that.pause(); }); tableContainer.on('mouseleave', function () { that.resume(); }); .
layui鼠标移入_js(Jquery)结合layui框架tip弹出层实现鼠标悬停弹出提示层，鼠标移开提示层消失的方法...
weixin_39765625的博客
12-20 1956
要实现上图所示的效果，即鼠标移到问号元素上，弹出提示信息，鼠标移开后提示层消失的效果，方法有三种：方法一：用原始的js实现，即在鼠标要悬停的元素上添加onMouseOver和onMouseOut捕获鼠标事件。(过时的方法)。方法二：(推荐使用)JQuery的mouseover()和mouseout()方法。例如使用此方法结合layui前端框架的tip提示层实现上述效果代码如下：HTML代码片段...
layui table表格展示鼠标滑过列显示tips
a5252145的博客
07-09 1万+
鼠标滑过操作列 // 鼠标滑过操作列 // var tip_index = 0; $(document).on('mouseenter', '#proStatus', function(){ tip_index = layer.tips('项目情况', '#proStatus', {time: 0}); }).on('mouseleave', '#proStatus', function(...
layui table动态增加行以及通过键盘定位指定单元格
mr_foxsand的专栏
10-21 3021
版权声明：请勿用于任何商业用途的文章转载，转载请说明出处！ 业务需求： 1.入库单等此类单据表单，明细数据需要动态行。 2.光标需要定位到新增加行的指定单元格。 3.单元格填入数据后按回车，光标移动到下个可编辑的单元格；如果已经是最后一个单元格，那么光标移动到下一行的指定单元格；如果是最后一行的最后单元格，那么再次新增行 附：键值表 <!DOCTYPE html> <html lang="en"> <head> <...
解决layui表格中单元格显示内容过长，鼠标移到上方显示全部内容
qq_39080240的博客
08-16 7546
解决layui表格中单元格显示内容过长，鼠标移到上方显示全部内容
layui表格数据每一列独占一行
最新发布
06-03
可能是因为你在表格的列设置中将每一列的宽度设置得过大，导致每一列都独占一行。你可以尝试调整每一列的宽度，使得每一列的宽度合适，不会导致数据换行。另外，如果你使用了layui的固定列功能，可能会导致每一列都...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值