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

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

项目地址：wxTable-sawyersven

页面布局

表格主体采用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;
}

效果图如下:

[外链图片转存失败(img-z7zwNo21-1567648625579)(http://test.td/mock/images/1.png)]

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

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

[外链图片转存失败(img-ZtWMFvqE-1567648625580)(http://test.td/mock/images/2.png)]

上图的每个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

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

[外链图片转存失败(img-H3k1gZiT-1567648625581)(http://test.td/mock/images/3.png)]

我们将每个单元格都绑定在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。

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