layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示:
var tableIns = window.demoTable = table
.render({
elem : '#idTest',
id : 'idTest',
url : '/partyMember/getPartyMembersByOrgCode',
//width : 1500,
height : 'full',
cols : [ [ //标题栏
{checkbox : true,LAY_CHECKED : false,filter : 'test'},
{field: 'HEAD_URL', title: '头像', width: 100, align: 'center',templet:'#imgTpl'},
//{field : 'PM_CODE',title : '党员编号',width : 220,sort : true,align : 'center'},
{field : 'NAME',title : '党员姓名',width : 110,sort : true,align : 'center'},
{field : 'SEX',title : '性别',width : 70,sort : true,align : 'center',templet:'#sexTpl'},
{field : 'AGE',title : '年龄',width : 70,sort : true,align : 'center'},
{field : 'PARTY_AGE',title : '党龄',width : 70,sort : true,align : 'center'},
{field : 'BIRTH_DATE',title : '出生日期',width : 120,sort : true,align : 'center'},
{field : 'JOIN_PM_DATE',title : '入党时间',width : 120,sort : true,align : 'center'},
{field : 'FULL_PM_DATE',title : '转正时间',width : 120,sort : true,align : 'center'},
{field : 'TYPE',title : '类别',width : 120,sort : true,align : 'center',templet:'#typeTpl'},
{field : 'MOBILE_NO',title : '手机号码',width : 150,sort : true,align : 'center'},
//{field : 'CODE',title : '组织编码',width : 220,sort : true,align : 'center'},
{field : 'ORG_NAME',title : '所在支部',width : 230,sort : true,align : 'center'},
{field : 'UNIT_NAME',title : '所在单位',width : 220,sort : true,align : 'center'},
{fixed : 'right',title : '操作',width : 220,align : 'center',toolbar : '#barDemo'} ] ],
page : true //是否显示分页
,
limits : [ 15, 20,50, 100 ],
limit : 15
//每页默认显示的数量
,done:function(res,curr,count){
hoverOpenImg();//显示大图
$('table tr').on('click',function(){
$('table tr').css('background','');
$(this).css('background','');
});
}
});
在done函数中调用hoverOpenImg方法,以及单击表格行高亮的效果。
其中hoverOpenImg方法实现如下:
function hoverOpenImg(){
var img_show = null; // tips提示
$('td img').hover(function(){
//alert($(this).attr('src'));
var img = "";
img_show = layer.tips(img, this,{
tips:[2, 'rgba(41,41,41,.5)']
,area: ['160px']
});
},function(){
layer.close(img_show);
});
$('td img').attr('style','max-width:70px');
}
同样比较好理解,当td下的img被鼠标悬浮时,构造一个img元素,通过layer.tips方法在右边渲染该图片,当鼠标离开时,使用layer.close把当前提示框关闭,同时设置了下最大宽度max-width样式。
效果如下:
鼠标悬浮时:
以上这篇Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...相关推荐
- 【layui】Layui实现数据表格中鼠标悬浮图片放大效果
Layui实现数据表格中鼠标悬浮图片放大效果 前端代码: var url = baseUrl + "/api/SysUser/GetSysUsers";table.render({ ...
- php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码,ONE
已经生成的数据表格大致 - phpStudy...
基于jQuery的合并表格中相同文本的相邻单元格的代码 ONE 已经生成的数据表格大致内容如下: 地区 地区 商品代码 商品名称 数量 有效期至 距效期(月) 产品批号 规格 单位 条形码 广东 深圳 ...
- layui 读取本地excel内容_layui之数据表格--与后台交互获取数据的方法
jsp或html js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action ...
- CSS鼠标悬浮图片放大效果
当鼠标移入图片时,图片变大.父容器宽高不变. 效果: 鼠标移入前: 鼠标移入后: 代码:
- layui的table表格在同一单元格换行显示2个数据(layui-table)
转自:https://blog.csdn.net/qq15577969/article/details/104109430 先看一下最终效果图: 查看全文 http://www.taodudu.cc/ ...
- layui 数据表格下拉框_layui学习——数据表格嵌套下拉列表,并实现动态更新
layui学习--数据表格嵌套下拉列表,并实现动态更新 项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废 ...
- java excel单元格背景色,『excel表格尺寸设置』Java如何设置被导出excel单元格的样式?比如背景色,大小什么的?...
Java如何设置被导出excel单元格的样式?比如背景色,大小什么的? 使 poi ,具体实现 HSSFCellStyle style = null; // 创建表头style HSSFCellSty ...
- EasyExcel设置行中单个单元格的样式
1. 前言 在近期的工作中遇到一个导出Excel的需求: 用户通过Excel导入信息,校验用户导入的信息是否合法:如果导入的信息不合法,则保存失败:并且需要精确到行的字段设置标识,然后再将用户导入的信 ...
- layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
layui嵌套下拉框实用方法(附效果图) 在做项目时遇到一个问题,在layui 的数据表格table里面如何做一个下拉框呢?效果图如下: 这样的效果想必是最理想的了 思路分析: 我们可以通过layui ...
最新文章
- Context-Based Access Control (CBAC) 基于上下文的访问控制 理论知识
- 网络编程学习笔记(辅助数据)
- Java对象的实例化
- python基础教程: __del__() 清空对象
- php的cookie教程,PHP4之COOKIE支持详解
- Qt Creator共享项目设置
- win10 uwp 使用 Matrix3DProjection 进行 3d 投影
- java fileupload 文件_java用Commons fileupload 文件的上传
- 检测custom settype assign的UI view name
- UI设计素材|正确使用浮动按钮
- 新手学java 学哪方面_初学者学Java应从哪些方面学习?
- php tcp获取数据_php建立tcp服务请求数据双向通信问题
- 流水灯c语言代码switch,51单片机流水灯代码,四种方式,开关启动
- 两个excel宏病毒
- 软件测试结果分析和质量报告
- #pragma clang diagnostic ignored 忽略警告
- 苹果账号开启双重认证,以及如何在移动设备上同时添加私人账号和开发者账号
- [Solved] Javax.Crypto.AEADBadTagException: Tag Mismatch
- 最新无限制188旅游系统V7.0升级补丁 全社通V2.0补丁 Tourex 5.0源码下载
- Hadoop+hive+flask+echarts大数据可视化之系统数据收集
热门文章
- com组件的ref有时需要有时不需要?_Vue3组件通信总结
- Python函数中参数前带*是什么意思?
- python基础教程:数值与字符串类型
- 【哲学】自由意志是什么?(主观能动性)
- 如何用pycharm对比两段代码(或两个文件的代码)
- python numpy hstack() from shape_base.py (将数组水平堆叠)
- tensorflow 官方文档中文版 tensorflow教程 tensorflow教学
- AcWing算法基础课 Level-2 第三讲 搜索与图论
- mac 如何查看anaconda的路径_Mac OS如何直接查看gif图片?分享MAC直接查看gif图片的三种方法...
- 怎样用uml类图生成java类_JAVA:面向对象编程的底层逻辑,深度剖析