ScrollableFixedHeaderTable
一個具有固定表頭、自適應(yīng)列寬、單元格點(diǎn)擊事件支持、可滾動表格內(nèi)容、和斑馬線樣式的微信小程序表格組件。
項(xiàng)目地址：github項(xiàng)目地址，如果本項(xiàng)目對您有幫助，還請star，感謝
動機(jī)
瀏覽了不少微信小程序組件庫，發(fā)現(xiàn)都沒有表格組件，可能大家認(rèn)為微信小程序上展示表格沒有必要？之后又在github上找，發(fā)現(xiàn)不少組件只監(jiān)聽表格的行點(diǎn)擊事件，而我需要監(jiān)聽某一具體單元格的點(diǎn)擊事件，所以寫下了此份組件
真機(jī)演示
功能特性
- 固定表頭：表頭始終保持在屏幕頂部，方便用戶在查看表格數(shù)據(jù)時始終保持對列標(biāo)題的參考；
- 點(diǎn)擊事件支持：支持單元格點(diǎn)擊事件，以便在點(diǎn)擊每個單元格時（除表頭外）執(zhí)行自定義操作；
- 可滾動表格內(nèi)容：表格內(nèi)容可以在水平和垂直方向上滾動，以顯示更多的數(shù)據(jù)；
- 自適應(yīng)列寬：根據(jù)最長的表頭元素長度計算最小列寬，使表頭與表格數(shù)據(jù)保持同寬；
- 斑馬線樣式：表格行間隔的背景顏色不同，提高數(shù)據(jù)的可讀性；
- 可自定義表頭背景顏色和單元格無數(shù)據(jù)時的顯示內(nèi)容。
屬性列表
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
|---|---|---|---|---|
| column-names | Array | [] | yes | 表頭的列名數(shù)組 |
| table-data | Array | [] | yes | 表格數(shù)據(jù)的二維數(shù)組 |
| bind:celltap | eventhandle | - | yes | 點(diǎn)擊每個單元格時（除表頭外）執(zhí)行自定義操作。其中，形參的e.detail.row得到當(dāng)前單元格的行下標(biāo)；e.detail.col得到當(dāng)前單元格的列下標(biāo) |
| stripe | Boolean | true | no | 是否顯示斑馬紋 |
| borderline | Boolean | false | no | 是否顯示邊框 |
| header-background | String | ‘#2d66cf’ | no | 表頭的背景顏色 |
| no-data-msg | String | ‘無’ | no | 單元格無數(shù)據(jù)時的顯示內(nèi)容 |
表格組件源碼
- ScrollableFixedHeaderTable.js
// components/ScrollableFixedHeaderTable/ScrollableFixedHeaderTable.js
Component({
/**
* 組件的屬性列表
*/
properties: {
columnNames: {
type: Array,
value: []
},
tableData: {
type: Array,
value: []
},
//單元格無數(shù)據(jù)時的顯示內(nèi)容
noDataMsg:{
type:String,
value: '無'
},
//是否顯示斑馬紋
stripe:{
type:Boolean,
value:true
},
//是否顯示列邊框
borderline:{
type:Boolean,
value:false
},
//表頭背景顏色
headerBackground:{
type:String,
value:'#2d66cf'
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
minWidth: 80,
headerHeight: 3,
headerScrollLeft: 0
},
/**
* 組件的方法列表
*/
methods: {
calcMinWidth: function (cols) {
//由最長的表頭元素長度計算（表頭與表格數(shù)據(jù)的）最小寬度
var _max = -1;
const padding = 5;
const charWidth = 15;
for (let i = 0; i < cols.length; i++) {
if (cols[i].length > _max) {
_max = cols[i].length;
}
}
const maxTextLength = _max;
return padding * 2 + charWidth * maxTextLength;
},
//實(shí)現(xiàn)表頭的同步滑動
syncScroll: function (e) {
const scrollLeft = e.detail.scrollLeft;
this.setData({
headerScrollLeft: scrollLeft
});
},
onCellTap: function (e) {
this.triggerEvent('celltap', e.currentTarget.dataset);
}
},
ready: function () {
const minWidth = this.calcMinWidth(this.data.columnNames);
this.setData({
minWidth
});
}
});
- ScrollableFixedHeaderTable.json
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {}
}
- ScrollableFixedHeaderTable.wxml
<!--components/ScrollableFixedHeaderTable/ScrollableFixedHeaderTable.wxml-->
<!-- 表頭，此處禁用了表頭的指針事件，即表頭將不會響應(yīng)觸摸滾動事件。表頭的滾動由表格內(nèi)容的滑動引起。 -->
<scroll-view class="header" scroll-x="true" scroll-left="{{headerScrollLeft}}" style="pointer-events: none; position: fixed; z-index: 100;">
<view class="tr">
<view class="th" style="min-width: {{minWidth}}px; {{borderline ? 'border: 0.1px solid black;' : ''}} background:{{headerBackground}}" wx:for="{{columnNames}}" wx:key="*this" wx:for-item="colName">
<text>{{colName}}</text>
</view>
</view>
</scroll-view>
<!-- 表格內(nèi)容 -->
<!-- table數(shù)組的每個數(shù)組元素作為rowDatas，rowDatas是一個包含該行所有信息的數(shù)組，故還可以循環(huán)展開 -->
<scroll-view class="content" wx:if="{{columnNames.length != 0}}" scroll-x="true" bindscroll="syncScroll" style="padding-top: {{headerHeight}}rem;">
<view class="tr {{stripe ? 'tr-stripe' : ''}}" wx:for="{{tableData}}" wx:key="*this" wx:for-index='rowIndex' wx:for-item="rowData" >
<view class="td" style=" min-width: {{minWidth}}px; {{borderline ? 'border: 0.1px solid black;' : ''}} {{(stripe && (rowIndex % 2 == 1)) ? 'background: #f0eeee;' : '' }}" wx:for="{{rowData}}" wx:key="*this" wx:for-item="detail" wx:for-index='colIndex' bindtap="onCellTap" data-row="{{rowIndex}}" data-col="{{colIndex}}">
{{(detail.length == 0 )? noDataMsg : detail}}
</view>
</view>
</scroll-view>
- ScrollableFixedHeaderTable.wxss
/* components/ScrollableFixedHeaderTable/ScrollableFixedHeaderTable.wxss */
.tr {
display: flex;
align-items: center;
height: 3rem;
width: 100%;
}
.td, .th {
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
height: 100%;
}
.th {
color: #fff;
font-size: 15px;
}
.tr-stripe {
background: #fff;
}
.tr-stripe:nth-child(2n) {
background: #f0eeee;
}
.td {
font-size: 12px;
}
使用示例
將以上4份源文件添加至當(dāng)前目錄下的同一文件夾ScrollableFixedHeaderTable，并對需要使用此組件的頁面json文件添加以下代碼以引入組件index.json：
{
"usingComponents": {
"scrollable-fixed-header-table": "./ScrollableFixedHeaderTable"
}
}
在需要使用此組件的頁面的WXML文件中，添加以下代碼以使用組件：
index.wxml：文章來源：http://www.zghlxwxcb.cn/news/detail-843375.html
<scrollable-fixed-header-table
column-names="{{columnNames}}"
table-data="{{table}}"
bind:celltap="onCellTap"
stripe="{{stripe}}"
borderline="{{borderline}}"
header-background="{{headerbg}}"
no-data-msg="無"
/>
index.js：文章來源地址http://www.zghlxwxcb.cn/news/detail-843375.html
Page({
data: {
stripe: true,
borderline:false,
headerbg:'#2d66cf',
columnNames: ['Header 1', 'Header 2', 'Header 3', 'Header 4'],
table: [
['', 'Row 1, Col 2', 'Row 1, Col 3', 'Row 1, Col 4'],
['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3', 'Row 2, Col 4'],
['Row 3, Col 1', 'Row 3, Col 2', 'Row 3, Col 3', 'Row 3, Col 4'],
['Row 4, Col 1', 'Row 4, Col 2', 'Row 4, Col 3', 'Row 4, Col 4'],
['Row 5, Col 1', 'Row 5, Col 2', 'Row 5, Col 3', 'Row 5, Col 4'],
['Row 6, Col 1', 'Row 6, Col 2', 'Row 6, Col 3', 'Row 6, Col 4'],
['Row 7, Col 1', 'Row 7, Col 2', 'Row 7, Col 3', 'Row 7, Col 4'],
['Row 8, Col 1', 'Row 8, Col 2', 'Row 8, Col 3', 'Row 8, Col 4'],
['Row 9, Col 1', 'Row 9, Col 2', 'Row 9, Col 3', 'Row 9, Col 4'],
['Row 10, Col 1', 'Row 10, Col 2', 'Row 10, Col 3', 'Row 10, Col 4'],
['Row 11, Col 1', 'Row 11, Col 2', 'Row 11, Col 3', 'Row 11, Col 4'],
['Row 12, Col 1', 'Row 12, Col 2', 'Row 12, Col 3', 'Row 12, Col 4'],
['Row 13, Col 1', 'Row 13, Col 2', 'Row 13, Col 3', 'Row 13, Col 4'],
['Row 14, Col 1', 'Row 14, Col 2', 'Row 14, Col 3', 'Row 14, Col 4'],
['Row 15, Col 1', 'Row 15, Col 2', 'Row 15, Col 3', 'Row 15, Col 4'],
['Row 16, Col 1', 'Row 16, Col 2', 'Row 16, Col 3', 'Row 16, Col 4'],
['Row 17, Col 1', 'Row 17, Col 2', 'Row 17, Col 3', 'Row 17, Col 4'],
['Row 18, Col 1', 'Row 18, Col 2', 'Row 18, Col 3', 'Row 18, Col 4'],
['Row 19, Col 1', 'Row 19, Col 2', 'Row 19, Col 3', 'Row 19, Col 4'],
['Row 20, Col 1', 'Row 20, Col 2', 'Row 20, Col 3', 'Row 20, Col 4'],
]
},
onCellTap: function (e) {
console.log('點(diǎn)擊的單元格行索引為：', e.detail.row, ' 列索引為：', e.detail.col);
}
});
注意事項(xiàng)
- 本組件僅適用于微信小程序，不支持其他平臺；
- 建議在使用此表格時，頁面不展示除該表格以外的內(nèi)容；
- 沒有處理表頭點(diǎn)擊事件的函數(shù)。
到了這里，關(guān)于微信小程序表格組件--固定表頭、自適應(yīng)列寬、單元格點(diǎn)擊事件支持、可滾動表格內(nèi)容、斑馬線樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
