微信小程序实现一个可以编辑单元格的表格

最近开发的小程序中，提到了一个需要一张可编辑的表格，固定列可增加行，并且需要可改变任意单元格的内容。

页面布局

表格主体采用flex布局来模拟实现。分别用tr和td代表行和每个单元格,由于需要展示的内容较多，所以使用scroll-view来让表格可以

水平滑动。

<scroll-view scroll-x style="width: 100%" class="table">
<block wx:for="{{tables}}" wx:for-item="table" wx:for-index="table_index">
<view class="tr gray" wx:if="{{table_index % 2 == 0}}">
<view class="td" wx:for="{{table}}" wx:item="item" bindtap="openModal" data-id="{{table_index}}">{{item}}</view>
</view>
<view class="tr" wx:else>
<view class="td" wx:for="{{table}}" wx:item="item" bindtap="openModal" data-id="{{table_index}}">{{item}}</view>
</view>
</block>
</scroll-view>

.table {
border: 0px solid darkgray;
font-size: 12px;
}

.tr {
display: flex;
width: 2700rpx;
align-items: center;
}

.td {
width: 400rpx;
height: 4rem;
justify-content: center;
text-align: center;
word-wrap: break-word;
flex-shrink: 0;
line-height: 4rem
}
.gray{
background:#E6FE3F9;
}

效果图如下:



由于每个单元格未来内容比较多，所以一屏只展示两个单元格，其余单元格需向右滑动才能看到，所以截图效果要差一点(手动滑稽)

对表格的编辑我们决定放入一个模态框里，点击每个单元格以后弹出模态框显示整行数据和标题，从而让用户选择要编辑的内容，效果图如下：



上图的每个input从上而下代表每一行1到6个单元格，input左侧显示table的标题（也就是tables的第一行)

模态框代码

<view wx:if="{{show}}" class="mask-form">
<view class="mask-content-container" wx:for="{{cols}}" wx:for-item="col" wx:for-index="col_index">
<text class="list-mask-title">{{titles[col_index]}}</text>
<input class="list-mask-input" type="text" value="{{col}}" data-id="{{col_index}}" bindblur="dataChange" />
</view>
<button class="btn btn-confirm" type="success" bindtap="editModel">确认</button>
<button class="btn btn-cancle" type="default" bindtap="closeModel">取消</button>
</view>

模态框渲染出来的组里,text用来显示title,input里面是单元格的内容。

表格编辑

布局结束以后要进入重头戏，也就是如何去编辑我们table的每个单元格

假设我们获取到的数据是一个二维数组即:

page({
data:{
tables:[
['标题1','标题2','标题3','标题4','标题5','标题6'],
['内容1','内容2','内容3','内容4','内容5','内容6'],
['内容1','内容2','内容3','内容4','内容5','内容6'],
['内容1','内容2','内容3','内容4','内容5','内容6'],
]
}
})

点击单元格获取数据

我们在之前的页面中已经通过table_index为每个单元格指定它属于tables里的哪一个数组,通过data-id

所以页面里的数据应该是这样:



我们将每个单元格都绑定在openModal方法上, 并且通过传入的data-id获取到对应的整行数据。

openModel(e) {
let id = e.target.dataset.id;
this.setData({
titles: this.data.tables[0],
cols: this.data.tables[id],
id: id,
show: true
});
},

cols:通过传入的id获取到的对应数组

show:决定模态框的显示状态。

id:将获取到的id保存在data中

提交修改

input的bindblur方法在修改input后将input的值保存在数组中。

dataChange(e) {
let cols = this.data.cols;
cols[e.target.dataset.id] = e.detail.value;
console.log(cols);
this.setData({
cols: cols
});

},

点击模态框的确认按钮时，将修改过的数组进行保存。

editModel(e) {
let tables = this.data.tables;
tables[this.data.id] = this.data.cols;

this.setData({
tables: tables,
show: false
});

},

最后将整个tables数据传给服务器进行保存。

这样，我们就实现了一个可以编辑每个单元格的table。

如果有任何不妥或错误之处，欢迎指出。