layui table 设置滚动条

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jacke121/article/details/85647749

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>

展开阅读全文

没有更多推荐了,返回首页