自适应表头和左侧列固定的表格
2016-09-28 14:05:20
在网站建设中，表格的出现提供了数据对比的便利以及数据查看的便利。但是当表格数据过多时，在同一个屏幕下无法完全展示，出现滚动条后，表头部分就被盖住，很容易不清楚看的当前列所代表的意义。同时，在移动端中，由于列数过多，移动设备宽度较小，无法完全展示表格内容，这让数据的展示有出现了问题。
为了解决上述问题，可以想出一个办法就是当表头部分被滚动到浏览器外面，即不在显示区间中，则表头部分固定不动，表格内容滑动，这样就可以方便的清楚自己看的是哪一列了，同理，当浏览器宽度小于表格宽度时，则隐藏超出部分，让左侧一列固定，右侧部分可以滑动，则可以方便的知道自己看的是哪一行。
下面来看一个小demo
<div class="arti-area">
<h4 class="artiTitle">配置参数</h4>
<!-- 顶部栏 -->
<div class="m-con" id="Jcon">
<div class="m-pnl">
<div class="m-pnl-wrap peiPrice" id="Jpnl">
<div class="m-con-left">
<div class="m-choice">
<p class="rowspan">主要装备</p>
</div>
<div class="m-choice">
<p style="height:38px;">市场指导价</p>
</div>
</div>
<div class="m-con-right m-scroll" id="JscrollFix">
<div class="m-scroll-wrap" id="m-scroll-wrap"
style="transform: translate(0px, 0px) translateZ(0px);">
<div class="m-scroll-col">
<div class="m-type">时尚版</div>
<div class="m-type">1.6L手动</div>
<div class="m-type">10.2万</div>
</div>
<div class="m-scroll-col">
<div class="m-type"></div>
<div class="m-type">1.6L自动</div>
<div class="m-type">10.2万</div>
</div>
<div class="m-scroll-col">
<div class="m-type"></div>
<div class="m-type">1.2T手动</div>
<div class="m-type">10.2万</div>
</div>
<div class="m-scroll-col">
<div class="m-type">旗舰版</div>
<div class="m-type">1.6T自动</div>
<div class="m-type">10.2万</div>
</div>
<div class="m-scroll-col">
<div class="m-type"></div>
<div class="m-type">1.2T自动</div>
<div class="m-type">10.2万</div>
</div>
<div class="m-scroll-col">
<div class="m-type">尊贵版</div>
<div class="m-type">1.2T自动</div>
<div class="m-type">10.2万</div>
</div>
</div>
<!-- /m-scroll-wrap -->
</div>
<!-- /m-scroll -->
</div>
</div>
<!-- 操作面板 E -->
<div class="m-con" id="Jconc">
<!-- 左侧栏 S -->
<div class="m-con-left" id="Jside">
<div class="m-section">
<div class="m-tit" id="Jcatalog1">
<span class="m-markCenter">驭感科技</span>
</div>
<div class="m-tit" id="Jcatalog2">
<span class="m-mark m-markTitle">T+STT高效动力</span>
</div>
<p class="odd">1.6THP涡轮增压直喷发动机</p>
<p>1.2THP涡轮增压直喷发动机</p>
<p class="odd">新一代1.6L CVVT技术发动机</p>
<p>Stop-Start 发动机智能启停系统</p>
<p class="odd">第三代6速手自一体变速箱</p>
<p>运动模式</p>
</div>
<div class="m-section">
<div class="m-tit">
<span class="m-mark m-markTitle">驾感科技</span>
</div>
<p>智能手机互联系统</p>
<p class="odd">只能免钥匙系统</p>
<p>i-Start一键启动</p>
<p class="odd">3D实景导航</p>
</div>
<div class="m-section">
<div class="m-tit">
<span class="m-mark m-markTitle">安全装备</span>
</div>
<p>盲区探测</p>
<p class="odd">胎压监测</p>
<p>Blue-i车载互联系统</p>
</div>
</div>
<!-- 滑动栏 S -->
<div class="m-con-right m-scroll" id="Jscroll">
<div class="m-scroll-wrap"
style="transform: translate(0px, 0px) translateZ(0px);">
<div class="m-scroll-col">
<div class="m-section doublerow">
<p class="odd">-</p>
<p>-</p>
<p class="odd">-</p>
<p>-</p>
<p class="odd">●</p>
<p>●</p>
</div>
<div class="m-section">
<p>-</p>
<p class="odd">-</p>
<p>-</p>
<p class="odd">-</p>
</div>
<div class="m-section">
<p>-</p>
<p class="odd">-</p>
<p>-</p>
</div>
</div>
<div class="m-scroll-col ">
<div class="m-section doublerow">
<p class="odd">-</p>
<p>-</p>
<p class="odd">●</p>
<p>●</p>
<p class="odd">●</p>
<p>●</p>
</div>
<div class="m-section">
<p>-</p>
<p class="odd">-</p>
<p>-</p>
<p class="odd">-</p>
</div>
<div class="m-section">
<p>-</p>
<p class="odd">-</p>
<p>-</p>
</div>
</div>
<div class="m-scroll-col ">
<div class="m-section doublerow">
<p class="odd">-</p>
<p>●</p>
<p class="odd">-</p>
<p>●</p>
<p class="odd">-</p>
<p>-</p>
</div>
<div class="m-section">
<p>-</p>
<p class="odd">-</p>
<p>-</p>
<p class="odd">-</p>
</div>
<div class="m-section">
<p>-</p>
<p class="odd">-</p>
<p>-</p>
</div>
</div>
<div class="m-scroll-col ">
<div class="m-section doublerow">
<p class="odd">-</p>
<p>-</p>
<p class="odd">●</p>
<p>●</p>
<p class="odd">●</p>
<p>●</p>
</div>
<div class="m-section">
<p>●</p>
<p class="odd">-</p>
<p>-</p>
<p class="odd">-</p>
</div>
<div class="m-section">
<p>-</p>
<p class="odd">-</p>
<p>-</p>
</div>
</div>
<div class="m-scroll-col ">
<div class="m-section doublerow" >
<p class="odd">-</p>
<p>●</p>
<p class="odd">-</p>
<p>●</p>
<p class="odd">●</p>
<p>●</p>
</div>
<div class="m-section">
<p>●</p>
<p class="odd">-</p>
<p>-</p>
<p class="odd">○</p>
</div>
<div class="m-section">
<p>-</p>
<p class="odd">-</p>
<p>○</p>
</div>
</div>
<div class="m-scroll-col ">
<div class="m-section doublerow">
<p class="odd">●</p>
<p>-</p>
<p class="odd">-</p>
<p>●</p>
<p class="odd">●</p>
<p>●（竞速模式）</p>
</div>
<div class="m-section">
<p>●</p>
<p class="odd">●</p>
<p>●</p>
<p class="odd">○</p>
</div>
<div class="m-section">
<p>●</p>
<p class="odd">●</p>
<p>○</p>
</div>
</div>
</div>
</div>
</div>
</div>上面的代码是html部分的主体代码，总共分为三个部分，采用div模拟表格的方式来实现。
该表格的三部分分别为：顶部，左侧，中间。中间部分以列为分割点。
头部部分：
m-con-left为左上角的表头部分
m-scroll-col为一列，每列包含三个m-type，分别是显示出来的三行（主要装备两行，市场指导价一行）， 每一个m-scroll-col中的第一个m-type为第一行，如果该行需要合并后面的列，则后面列的m-type内容置空即可（但要保留标签）
左侧部分： 左侧部分为一列，列中m-section为一组，用于划分T+STT高效动力、驾感科技（此类型的行宽度占满整个表格）等 每一个m-section中的m-tit为占满整个表格的行，例如：T+STT高效动力 左侧部分和中间部分的行的背景色以斑马线的形式分布，odd的颜色为深色
中间部分：
中间部分每m-scroll-col为一列，每列中m-section为一组（类似于左侧部分）
在js中
//设置头部位置
function headTopPosition(){
$("#Jpnl").css("width",$(".m-con").width());
$("#Jpnl").css("left",0);
$(".peiPrice").css("top",0);
}这部分代码是设置头部的位置，当页面有其他结构或可影响到头部固定到顶部时的位置，可修改此部分代码来修改位置。
来看一下整体的js代码
/*
* create by zhangxiaojian
* */
// ku_pub
// 公共库
function $$(obj){
return document.getElementById(obj);
}
function hasCls(el, cls) {
return el.classList && el.classList.contains(cls) || !!el.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addCls(el, cls) {
el.classList ? el.classList.add(cls) : !hasCls(el, cls) && (el.className += (!el.className ? '' : ' ') + cls);
}
function rmCls(el, cls) {
el.classList ? el.classList.remove(cls) : hasCls(el, cls) && (el.className = el.className.replace(new RegExp('(\\s|^)' + cls + '(\\s|$)'), ''));
}
// main
;(function() {
// 初始化
if ('undefined' == typeof PAGE_CONFIG) window.PAGE_CONFIG = {}; // 全局变量
var addedIdArr = PAGE_CONFIG.addedIdArr || [];
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)) {}else{
var scrollFix = initScroll('JscrollFix', 50);
var scrollCon = initScroll('Jscroll', 50);
bindScroll(scrollFix, scrollCon);
}
headTopPosition();
setCellHeight();
fixPnl();
//设置单元格高度
function setCellHeight() {
var sideCellArr = document.querySelectorAll('#Jside .m-section > p');
var colArr = document.querySelectorAll('#Jscroll .m-scroll-col');
var colCellArr = [];
for (var i = 0; i < colArr.length; i++) {
colCellArr[i] = colArr[i].querySelectorAll('.m-section > p');
}
for (var i = 0; i < sideCellArr.length; i++) {
var curSideCell = sideCellArr[i];
var rowH = curSideCell.clientHeight;
for (var j = 0; j < colArr.length; j++) {
var curColCell = colCellArr[j][i];
var rowH2 = curColCell.clientHeight;
if (rowH2 > rowH) rowH = rowH2;
}
for (var k = 0; k < colArr.length; k++) {
curSideCell.style.height = colCellArr[k][i].style.height = rowH + 'px';
}
}
if($(".arti-area ").is(":visible")){
var zs_colCont = $("#JscrollFix").find(".m-scroll-col");
$(".arti-area .m-scroll-col").css("width",(100/zs_colCont.length)+"%");
//console.log();
var wd_Position;
var colspanCont = 1;
for(var i=0;i<zs_colCont.length;i++){
if($($(zs_colCont[i]).find(".m-type")[0]).html()!=""){
wd_Position = i;
colspanCount =1;
}else{
colspanCount +=1;
$($(zs_colCont[wd_Position]).find(".m-type")[0]).css({"width":colspanCount*100+"%","background":"#939393"});
}
}
}
}
//设置头部位置
function headTopPosition(){
$("#Jpnl").css("width",$(".m-con").width());
$("#Jpnl").css("left",0);
$(".peiPrice").css("top",0);
}
$(window).resize(function(){
headTopPosition();
});
// 对比头部固定
function fixPnl() {
var fixObj = $$("Jpnl");
var sideObj = $$("Jside");
if (!fixObj || !sideObj) return;
var judgeFix = function() {
if (sideObj.getBoundingClientRect().top < 49&&sideObj.getBoundingClientRect().height>=-sideObj.getBoundingClientRect().top+100) {
addCls(fixObj, 'm-pnl-fixed');
headTopPosition();
} else {
rmCls(fixObj, 'm-pnl-fixed');
headTopPosition();
}
};
judgeFix();
if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)) {
}else{
var stoScroll = null;
window.addEventListener("scroll", function() {
headTopPosition();
stoScroll && clearTimeout(stoScroll);
stoScroll = setTimeout(function() {
judgeFix();
}, 50);
}, false);
}
}
// 创建 iScroll
function initScroll(elemId) {
var scrollObj = $$(elemId);
return new IScroll(scrollObj, {
scrollX: true,
scrollY: false,
tap: true,
probeType: 3,
bounce: false,
eventPassthrough: true
});
}
// 绑定 iScroll 相关事件
function bindScroll(scrollObj1, scrollObj2) {
if (!scrollObj1 || !scrollObj2) return;
var scrollTime = 200;
var endFlag = true;
var scrollArr = scrollObj1.scroller.children;
var curPos = 0;
scrollObj1.myPartner = scrollObj2;
scrollObj2.myPartner = scrollObj1;
if (3 <= addedIdArr.length) {
scrollObj1.scrollTo(scrollObj1.maxScrollX, 0, scrollTime);
scrollObj2.scrollTo(scrollObj2.maxScrollX, 0, scrollTime);
}
// 同步滑动
function syncScroll(scrollObj) {
if (!scrollObj || !scrollObj.myPartner) return;
scrollObj.myPartner.scrollTo(scrollObj.x, 0, 0);
endFlag = true;
}
// 滑动结束后执行
function doAfterEnd(scrollObj) {
if (!scrollObj) return;
syncScroll(scrollObj);
setCtrl();
setCurPos();
}
scrollObj1.on('scroll', function() {
syncScroll(this);
});
scrollObj2.on('scroll', function() {
syncScroll(this);
});
scrollObj1.on('scrollEnd', function() {
doAfterEnd(this);
});
scrollObj2.on('scrollEnd', function() {
doAfterEnd(this);
});
// 控制滑动
var prevObj = $$('JscrollPrev');
var nextObj = $$('JscrollNext');
if (prevObj && nextObj) {
setCtrl();
prevObj.addEventListener('click', function() {
ctrlScroll();
});
nextObj.addEventListener('click', function() {
ctrlScroll(true);
});
}
var DIS = 10; // 边界值
function setCtrl() {
var maxX = Math.abs(scrollObj1.maxScrollX);
var curX = Math.abs(scrollObj1.x);
var psty1 = DIS <= curX ? 'block' : 'none';
var psty2 = maxX - DIS >= curX ? 'block' : 'none';
$(prevObj).css("display",psty1);
$(nextObj).css("display",psty2);
/*prevObj.style.display = DIS <= curX ? 'block' : 'none';
nextObj.style.display = maxX - DIS >= curX ? 'block' : 'none';*/
}
// 设置当前位置
function setCurPos() {
if (!scrollArr.length) return;
var w = scrollArr[0].offsetWidth;
var curX = Math.abs(scrollObj1.x);
curPos = curX / w;
}
function ctrlScroll (nextFlag) {
if (!endFlag) return;
endFlag = false;
var index;
if (nextFlag) {
// 后一个
curPos = Math.floor(curPos) + 1;
index = scrollArr.length > curPos ? curPos : scrollArr.length - 1;
}
else {
// 前一个
curPos = Math.ceil(curPos) - 1;
index = 0 <= curPos ? curPos : 0;
}
scrollObj1.scrollToElement(scrollArr[index], scrollTime);
scrollObj2.scrollToElement(scrollArr[index], scrollTime);
}
// 更新 iScroll
function refreshScroll() {
if (!scrollObj1 || !scrollObj2) return;
scrollFix.refresh();
scrollCon.refresh();
scrollFix.scrollTo(0, 0, scrollTime);
scrollCon.scrollTo(0, 0, scrollTime);
}
}
})();本站提供此demo的演示以及demo打包下载，有兴趣的朋友可以查看一下，欢迎提出建议。
补充说明：
手机端的时候头部需要添加meta信息
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">演示链接请点击：演示
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
网站建设
网站建设（Website Design Service，WDS），是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务，无需了解代码技术，即可自由拖拽模块，可视化完成网站管理。全功能管理后台操作方便，一次更新，数据多端同步，省时省心。使用网站建设服务，您无需维持技术和设计师团队，即可快速实现网站上线，达到企业数字化转型的目的。