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

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

页面布局

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

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