Page layout

The main body of the table is simulated by flex layout. tr and td are used to represent rows and cells, respectively. Because there is more to show, scroll-view is used to make the table available.
Horizontal sliding.

<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;
}

The results are as follows:

Because each cell has more content in the future, only two cells are displayed in one screen, and the rest of the cells need to slide to the right to see, so the screenshot is less effective (manual funny)

To edit the table, we decided to put it in a modal box. After clicking on each cell, we popped up the modal box to display the whole line of data and the title, so that the user could choose the content to edit. The result is as follows:

Each input in the figure above represents one to six cells per row from top to bottom, and the title of the table (that is, the first row of tables) is displayed on the left side of the input.

Modal box code

<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">confirm</button>
    <button class="btn btn-cancle" type="default" bindtap="closeModel">cancel</button>
</view>

In the group rendered by the modal box, text is used to display title, and input is the content of the cell.

Form editing

After the layout is finished, we have to get into the big picture, that is, how to edit every cell of our table.

Suppose the data we get is a two-dimensional array, that is:

page({
    data:{
        tables:[
            ['Title 1','Title 2','Title 3','Title 4','Title 5','Title 6'],
            ['Content 1','Content 2','Content 3','Content 4','Content 5','Content 6'],
            ['Content 1','Content 2','Content 3','Content 4','Content 5','Content 6'],    
            ['Content 1','Content 2','Content 3','Content 4','Content 5','Content 6'],
        ]
    }
})

Click on the cell to get the data

In previous pages, we have specified which array it belongs to in tables for each cell through table_index, and through data-id

So the data in the page should be like this:

We bind each cell to the openModal method and retrieve the corresponding entire row of data through the incoming 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: The corresponding array obtained from the incoming id

show: Determines the display status of the modal box.

id: Save the acquired id in data

Submit amendments

The bindblur method of input saves the input value in an array after modifying the input.

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

    },

When the confirmation button of the modal box is clicked, the modified array is saved.

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

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

    },

Finally, the entire tables data is transmitted to the server for storage.

In this way, we implement a table that can edit each cell.