layui table 设置滚动条
table设置一下高度,就会自动出现滚动条:
table.render({
elem: '#jqGrid'
,height: 420
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
</head>
<body>
<div class="form-group col-sm-12">
<table class="layui-hide" id="jqGrid" lay-filter="jqGridFilter"></table>
<div id="jqGridPager"></div>
</div>
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="jquery-3.3.1.min.js" charset="utf-8"></script>
<script>
var index=0;
document.onkeydown = function(){
var quickclick = $(".layui-table").find("tr:last");
switch(event.keyCode) {
case 40://down
var tr = $(".layui-table").find("tr:eq("+index+")");
tr.css('background-color', 'white');
index+=1;
tr = $(".layui-table").find("tr:eq("+index+")");
tr.css('background-color', '#8FBC8F');
event.returnValue= false;
layuitable = $(".layui-table-main");
layuitable[0].scrollTop = index*10;
break;
case 38://up
var tr = $(".layui-table").find("tr:eq("+index+")");
tr.css('background-color', 'white');
index-=1;
tr = $(".layui-table").find("tr:eq("+index+")");
tr.css('background-color', '#8FBC8F');
event.returnValue= false;
layuitable = $(".layui-table-main");
layuitable[0].scrollTop = index*10;
break;
}
}
layui.use('table', function () {
table = layui.table;
table.render({
elem: '#jqGrid'
,height: 420
, cellMinWidth: 80
, totalRow: true
, cols: [[
{type: 'numbers', title: '序号', width: '80',fixed: 'left'},
{type: 'checkbox' }
, {field: 'id', title: 'ID', width: 80, sort: true}
, {field: 'username', title: '姓名', width: 120}
, {field: 'email', title: '邮件', minWidth: 150}
, {field: 'sign', title: '签名', minWidth: 160}
, {field: 'sex', title: '性别', event: 'setSign',width: 80}
, {field: 'city', title: '城市', width: 100}
, {field: 'experience', title: '积分', width: 80, sort: true}
]]
, data: [{
"id": "10001"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10002"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10003"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10004"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10005"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10006"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10007"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10008"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10008"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10008"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10008"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10008"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}, {
"id": "10008"
, "username": "你好"
, "email": "xianxin@layui.com"
, "sex": "男"
, "city": "西安"
, "sign": "人生恰似一场修行"
, "experience": "116"
, "ip": "192.168.0.8"
, "logins": "108"
, "joinTime": "2016-10-14"
}]
, page: true
, limits: [10, 30, 50, 100],
response: {
statusName: 'code'
, statusCode: 0
, msgName: 'msg'
, countName: 'layuiCount'
, dataName: 'layuiData'
}
, done: function (res, page, count) {
}
});
//排序重新加载
table.on('sort(jqGridFilter)', function (obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
vm.layerUiSortObj = obj;
});
//监听复选框事件
table.on('checkbox(jqGridFilter)', function (obj) {
//选中改变颜色
if (obj.checked == true) {
obj.tr.css('background-color', '#8FBC8F');
} else {
//取消选中恢复白色
obj.tr.css('background-color', 'white');
}
});
//监听单元格事件
table.on('tool(jqGridFilter)', function(obj){
var data = obj.data;
if(obj.event === 'setSign'){
//this.innerHTML='<div id="aa">这是内容</div>';
alert("行号:"+e.parentNode.rowIndex+"\n"+"列号:"+e.cellIndex);
this.className+=data.sign;
this.style.background = "red";
};
});
});
</script>
</body>
</html>
layui table 设置滚动条相关推荐
- layui table设置表格单元格换行,固定列高度改变
layui table设置表格单元格换行 css /** 控制表格单元格换行 **/ .layui-table-cell {height: auto;word-break: normal;displa ...
- html中table设置滚动条
主要是给table放到一个div里去,然后再设置div显示滚动条 <!--div比table大小要小才会显示--><div style="overflow-x: auto; ...
- layui Table 设置title 字体加粗
<style>.layui-table th{font-weight: bold; }</style> <body><table id="demo& ...
- layui table 字体大小_layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行 ...
- layui 行变灰_layui table设置某一行的字体颜色方法
table自带的可以设置某一个单元格颜色,必须根据内容来修改,对于很多列同时修改并不方便,直接使用js操作比较简单. 首先自定义一个div,内部存放table,根据class找到table,然后找到行 ...
- layui table 复选框跳页后再回来保持原来选中的状态
layui table默认跳页后不存在源页面选中的状态.如果要实现记录源页面的选中状态,需要定义一个全局变量来记录数据选中状态. 1.修改table.js ;layui.define(["l ...
- layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题 加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
- layui table勾选框的修改_layui怎么设置checkbox勾选
方法1 在返回的json中设置LAY_CHECKED为true,页面上的checkbox就是选中状态了.data":[ {"name":"北京市",& ...
- layui表格 设置默认排序_layui table对表格数据处理后的排序问题
table模块是layui最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作.在 table模块对表格数据处理后排序可能出现问题,本文就来为大家介绍一下解决这种问题的方法. 使用layui ...
最新文章
- 人工智能可以发现数据中隐藏的物理规律
- android复制链接到粘贴板,Android复制粘贴到剪贴板
- nginx静态资源反向代理
- 【CyberSecurityLearning 76】DC系列之DC-7渗透测试(Drupal)
- hbuilder怎么设置网页的大小_大明:网页字体大小怎么调?教你方法一键搞定
- python缺点这么多、为什么还流行_Python这么火,为什么说它不是未来的编程语言?...
- 利用Seafile搭建私有文件同步云盘
- 超简单将Centos的yum源更换为国内的阿里云源
- (77)FPGA时序违例及解决办法-面试必问(一)(第16天)
- 基于MaterialDesign设计风格的妹纸app的简单实现
- Google是如何设定目标并测量成功的
- SQL正则表达式的妙用
- ucenter通信失败和不能登录的解决
- Excel常用的功能
- 组策略管理(关闭UAC)
- 来啊,一起来智障啊:国外大火游戏人类一败涂地究竟有多好玩?
- recycler上下拉刷新view
- 如何修改ftp服务器密码,ftp密码,3种修改ftp密码的方法
- vue 未登录 登录超时跳转到登录页
- CSS实现文字垂直居中
热门文章
- findwindowex子窗口类型有哪几种_SQL-窗口函数
- Linux-2.6设备模型与sysfs文件系统
- linux配置文件为yum,Linux系统配置本地yum源
- mysql 索引 normal_mysql索引类型 normal, unique, full text
- junit5_使用JUnit对ADF应用程序进行单元测试
- c语言bim的题目,求助:几道简单C语言程序小题
- 目前HTML常用的字符集编码方式,HTML知识点
- oracle prvg 1901,12c 打补丁analyze时报错
- 技师学院计算机老师,技师学院计算机教学课堂改革探索论文
- 计算机存储器与寄存器的区别,存储器和寄存器区别