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

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

项目地址：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。

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