HBuilder MUI 中想要实现:添加固定列固定表头的表格,单元格根据宽度自适应,参考如下链接:https://www.douban.com/note/286673563/,还有他的github封装好的android的工程文件,链接如下:移动端固定列js工具,只要把这些文件放在html中,就可以实现固定前几列,然后水平和竖向滚动:
1.导入js和css文件:
2.接着在自己的html这么用:特别注意作者的表格,宽度不是自适应的,会有换行的出现,你可以在table上添加如下css样式:
<table class="table browser-table " id="example" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
<!DOCTYPE HTML>
<html>
<head>
<title>Mobile Fixed Columns Table example(bootstrap.css)</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="../css/scroll/bootstrap.min.css" rel="stylesheet">
<link href="../css/scroll/table_scroll.css" rel="stylesheet">
<script src="../js/scroll/jquery.js"></script>
<script src="../js/scroll/jquery.dataTables.js"></script>
<script src="../js/scroll/FixedColumns.js"></script>
<script src="../js/scroll/iscroll.js"></script>
<script src="../js/scroll/datatables.mobile-fixed-columns-table.js"></script>
<script>
$(document).ready(function() {
var headerHeight = $('.header').outerHeight(true);
var theadHeight = $('#example thead').outerHeight(true);
var footerHeight = $('.footer').outerHeight(true);
var scrollY = $(window).height() - headerHeight - theadHeight - footerHeight;
$('#example').mobileFixedColumnsTable({
'sScrollY': '450px',
'sScrollX': '100%',
'bScrollCollapse': true,
'oLanguage': {
'sInfo': ''
}
}, {
fixedColumnsOptions: { // 请参考DataTables的FixedColumns的配置
iLeftColumns: 2
},
scrollerOptions: { // 请参考iScroll的配置
onScrollMove: function() {
//console.log(this, arguments);
}
}
});
});
</script>
</head>
<body>
<div class="table-responsive">
<table class="table browser-table " id="example" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
<thead>
<tr>
<th>品种</th>
<th>最新价</th>
<th>涨跌</th>
<th>买价</th>
<th>卖价</th>
<th>最高价</th>
<th>最低价</th>
<th>时间</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>黄金9999</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeC">
<td>黄金9998</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄金9997</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄金9995</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄金9994</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄金9993</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄金9992</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄金9991</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄金9991</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>黄金9990</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>青铜9999</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>青铜9998</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>青铜9997</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>青铜9994</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>青铜9994</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>青铜9994</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>青铜9994</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
<tr class="gradeA">
<td>青铜9994</td>
<td>279.15</td>
<td>1.31</td>
<td>279.10</td>
<td>288.45</td>
<td>299.45</td>
<td>340.45</td>
<td>2018-01-30</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> css文件内容table_scroll.css:
/* 为了滚动的表格使用样式:
* 覆盖bootstrap的样式, 默认为100%, 会造成水平滚动条出不来 */
table {
max-width: none;
}
.table {
margin-bottom: 0;
}
.table td {
border-top-style: dotted;
}
.browser-table tr.odd.gradeA {
background-color: #ddffdd;
}
.browser-table tr.even.gradeA {
background-color: #eeffee;
}
.browser-table tr.odd.gradeC {
background-color: #ddddff;
}
.browser-table tr.even.gradeC {
background-color: #eeeeff;
}
.browser-table tr.odd.gradeX {
background-color: #ffdddd;
}
.browser-table tr.even.gradeX {
background-color: #ffeeee;
}
.browser-table tr.odd.gradeU {
background-color: #ddd;
}
.browser-table tr.even.gradeU {
background-color: #eee;
}
.DTFC_LeftHeadWrapper,
.DTFC_LeftBodyWrapper {
border-right: 0px solid #000;/*1px的话就有横线*/
}
.DTFC_LeftHeadWrapper,
.dataTables_scrollHeadInner {
border-bottom: 0px solid #000;/*1px的话就有横线*/
}
.header {
text-align: center;
background: #0290da;
margin: 0;
}
.footer {
position: absolute;
bottom: 2px;
right: 2px;
width: 100%;
text-align: right;
background: #f5f5f5;
padding: 10px 0;
}
.name {
text-decoration: none;
color: #333;
} 这样之后,就可以实现移动端的水平和竖向滚动,并且固定前几列功能,效果还不错,再次感谢作者,关于刷新数据的,还在研究中:
