javascript - 怎么实现一个固定头部和固定左边第一列的table-PHP中文网问答

怪我咯2017-04-11 10:56:45 7楼

其实这个功能可以使用easyUI里面的Data Grid功能里的Frozen Columns in DataGrid实现，这个功能项目可以固定左边第一排或左边第一与第二排栏位，可以上下滑动（右边资料同步），但往左边不会滑动；而右边的表格则是表头固定置顶，上下滑动表头固定，往左滑动会隐藏到左排后面

easyUI的Data Grid可以帮助你做很多事情，包括资料排序，查找，过滤等等

http://www.jeasyui.com/demo/m...

赞 +0

添加回复

巴扎黑2017-04-11 10:56:45 6楼

使用p的一个实现

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        body{
            margin:50px;
        }
        .col{
            display: inline-block;
            border-right:0px solid #cccccc;
            border-left:1px solid #cccccc;
            border-top:1px solid #cccccc;
            border-bottom:1px solid #cccccc;
            margin-left:0px;
            margin-right:-4px;
            width:100px;
            height:50px;
            box-sizing: border-box;
            background-color: #ffffff;
            color:#000000;
            text-align: center;
            line-height: 50px;
        }

        .header .col:last-child{
            border:1px solid #cccccc;
        }
        .row .col:last-child{
            border:1px solid #cccccc;
        }
        .headercol{
            background-color: #0E2D5F;
            color:white;
            font-size: 17px;
            text-align: center;
        }
        .fixedcol{
            background-color: #1A68A2;
            color:white;
            font-size: 17px;
            text-align: center;
        }
        .mytable_fixed{
            overflow: hidden;
            border:1px solid #cccccc;
        }
        .mytable_fixedHeaderColumn,.mytable_header_left,.mytable_fixedColumn{
            float:left;
            overflow: hidden;
        }

        .mytable_conentent{
            float:left;
            overflow: auto;
        }
        .mytable_header{
            overflow:hidden;
            box-sizing: border-box;
        }


    </style>
</head>
<body >



<p class="mytable_fixed" style="width:800px;height:450px;">
    <p class="mytable_header" style="width:100%;height:50px;background-color: grey;border-bottom: 1px solid #cccccc;">
        <p class="mytable_fixedHeaderColumn" style="width:200px;height:100%;">
            <p class="col headercol" style="">column1</p>
            <p class="col headercol" style="">column2</p>
        </p>
        <p class="mytable_header_left" style="width:600px;height:100%;background-color: #1e83c9;">
            <p style="width:700px;">
                <p class="col headercol" style="">column3</p>
                <p class="col headercol" style="">column4</p>
                <p class="col headercol" style="">column5</p>
                <p class="col headercol" style="">column6</p>
                <p class="col headercol" style="">column7</p>
                <p class="col headercol" style="">column8</p>
                <p class="col headercol" style="">column9</p>
            </p>
        </p>

    </p>
    <p class="mytable_container" style="width:900px;height:400px;border-bottom: 1px solid #cccccc;box-sizing: border-box">
        <p class="mytable_fixedColumn" style="width:200px;height:400px;background-color: #00a23f;">
            <!--固定2列的行展示-->
            <p class="myfixedrow">
                <p class="col fixedcol" style="">row1*column1</p>
                <p class="col fixedcol" style="">row1*column2</p>
            </p>
            <p class="myfixedrow">
                <p class="col fixedcol" style="">row2*column1</p>
                <p class="col fixedcol" style="">row2*column2</p>
            </p>
            <p class="myfixedrow">
                <p class="col fixedcol" style="">row3*column1</p>
                <p class="col fixedcol" style="">row3*column2</p>
            </p>
            <p class="myfixedrow">
                <p class="col fixedcol" style="">row4*column1</p>
                <p class="col fixedcol" style="">row4*column2</p>
            </p>
            <p class="myfixedrow">
                <p class="col fixedcol" style="">row5*column1</p>
                <p class="col fixedcol" style="">row5*column2</p>
            </p>
            <p class="myfixedrow">
                <p class="col fixedcol" style="">row6*column1</p>
                <p class="col fixedcol" style="">row6*column2</p>
            </p>
            <p class="myfixedrow">
                <p class="col fixedcol" style="">row7*column1</p>
                <p class="col fixedcol" style="">row7*column2</p>
            </p>
            <p class="myfixedrow">
                <p class="col fixedcol" style="">row8*column1</p>
                <p class="col fixedcol" style="">row8*column2</p>
            </p>
            <p class="myfixedrow">
                <p class="col fixedcol" style="">row9*column1</p>
                <p class="col fixedcol" style="">row9*column2</p>
            </p>
        </p>
        <p class="mytable_conentent" style="width:600px;height:400px;background-color: #1e83c9;">
            <!--非固定列数据-->
            <p style="width:700px;">
                <p class="myrow" >
                    <p class="col" style="">row1*col3</p>
                    <p class="col" style="">row1*col4</p>
                    <p class="col" style="">row1*col5</p>
                    <p class="col" style="">row1*col6</p>
                    <p class="col" style="">row1*col7</p>
                    <p class="col" style="">row1*col8</p>
                    <p class="col" style="">row1*col9</p>
                </p>
                <p class="myrow" >
                    <p class="col" style="">row2*col3</p>
                    <p class="col" style="">row2*col4</p>
                    <p class="col" style="">row2*col5</p>
                    <p class="col" style="">row2*col6</p>
                    <p class="col" style="">row2*col7</p>
                    <p class="col" style="">row2*col8</p>
                    <p class="col" style="">row2*col9</p>
                </p>
                <p class="myrow" >
                    <p class="col" style="">row3*col3</p>
                    <p class="col" style="">row3*col4</p>
                    <p class="col" style="">row3*col5</p>
                    <p class="col" style="">row3*col6</p>
                    <p class="col" style="">row3*col7</p>
                    <p class="col" style="">row3*col8</p>
                    <p class="col" style="">row3*col9</p>
                </p>
                <p class="myrow" >
                    <p class="col" style="">row4*col3</p>
                    <p class="col" style="">row4*col4</p>
                    <p class="col" style="">row4*col5</p>
                    <p class="col" style="">row4*col6</p>
                    <p class="col" style="">row4*col7</p>
                    <p class="col" style="">row4*col8</p>
                    <p class="col" style="">row4*col9</p>
                </p>
                <p class="myrow" >
                    <p class="col" style="">row5*col3</p>
                    <p class="col" style="">row5*col4</p>
                    <p class="col" style="">row5*col5</p>
                    <p class="col" style="">row5*col6</p>
                    <p class="col" style="">row5*col7</p>
                    <p class="col" style="">row5*col8</p>
                    <p class="col" style="">row5*col9</p>
                </p>
                <p class="myrow" >
                    <p class="col" style="">row6*col3</p>
                    <p class="col" style="">row6*col4</p>
                    <p class="col" style="">row6*col5</p>
                    <p class="col" style="">row6*col6</p>
                    <p class="col" style="">row6*col7</p>
                    <p class="col" style="">row6*col8</p>
                    <p class="col" style="">row6*col9</p>
                </p>
                <p class="myrow" >
                    <p class="col" style="">row7*col3</p>
                    <p class="col" style="">row7*col4</p>
                    <p class="col" style="">row7*col5</p>
                    <p class="col" style="">row7*col6</p>
                    <p class="col" style="">row7*col7</p>
                    <p class="col" style="">row7*col8</p>
                    <p class="col" style="">row7*col9</p>
                </p>
                <p class="myrow" >
                    <p class="col" style="">row8*col3</p>
                    <p class="col" style="">row8*col4</p>
                    <p class="col" style="">row8*col5</p>
                    <p class="col" style="">row8*col6</p>
                    <p class="col" style="">row8*col7</p>
                    <p class="col" style="">row8*col8</p>
                    <p class="col" style="">row8*col9</p>
                </p>
                <p class="myrow" >
                    <p class="col" style="">row9*col3</p>
                    <p class="col" style="">row9*col4</p>
                    <p class="col" style="">row9*col5</p>
                    <p class="col" style="">row9*col6</p>
                    <p class="col " style="">row9*col7</p>
                    <p class="col " style="">row9*col8</p>
                    <p class="col " style="">row9*col9</p>
                </p>
            </p>
        </p>
    </p>

</p>


<script>

    var mytable_conentent_Dom=document.getElementsByClassName("mytable_conentent")[0];
    var mytable_fixedColumn_Dom=document.getElementsByClassName("mytable_fixedColumn")[0];
    var mytable_header_left_Dom=document.getElementsByClassName("mytable_header_left")[0];

    mytable_conentent_Dom.addEventListener("scroll",function(event){
        var target=event.target;
        mytable_fixedColumn_Dom.scrollTop=target.scrollTop;
        mytable_header_left_Dom.scrollLeft=target.scrollLeft;


    },false);
</script>

</body>
</html>

赞 +0

添加回复

天蓬老师2017-04-11 10:56:45 5楼

这个建议直接用p嵌套自己实现一个结构吧，直接用table恐怕是不行的

赞 +0

添加回复

怪我咯2017-04-11 10:56:45 4楼

这种需求使用简单的样式已经无法实现了，推荐一个插件吧：FixedHeaderTable，如果不实用 jQuery 的话可以参考一下实现方式。

赞 +0

添加回复

天蓬老师2017-04-11 10:56:45 3楼

https://segmentfault.com/a/1190000004713875
固定表头。
这种需求单纯用table很难实现。建议还是使用p模拟吧。

赞 +0

添加回复

天蓬老师2017-04-11 10:56:45 2楼

怪怪的，第一列固定，滑动列表的时候只有只有后边的列动，那数据对么？
就你这个要求，把第一列和头部拆掉，然后里边放table，没有头部就可以了。

赞 +0

添加回复

怪我咯2017-04-11 10:56:45 1楼

第一行使用一个table固定，但是隐藏；
左侧列使用一个table固定，但是隐藏；
滚动部分使用table(包含第一行和第一列)；

当table相应拖动事件时；table.offset.left>0 或 table.offset.top>0
显示相应固定的p（第一行使用一个table固定，左侧列使用一个table固定）
屏蔽滚动部分的table的浏览器事件，使table在SwipeLeft || SwipeRight 只横向滚动，SwipeTop || SwipeDown的时候只上下滚动...代码量预估好大...

缺点：
列宽和行高；需要指定；当然如果第一列或者第一行可以取表格的第一行和第一列的宽高和分布；这样可以响应式了；...代码量预估更大...

赞 +0

添加回复