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;
}
這樣之後,就可以實現移動端的水平和豎向滾動,並且固定前幾列功能,效果還不錯,再次感謝作者,關於刷新數據的,還在研究中: