マイクロチャンネル達成アプレットは、セルテーブルを編集することができます

最近開発されたアプレットは、固定回線カラム、および任意のセルの内容を変更する必要性を増加させる、編集可能なテーブルを必要と呼びます。

プロジェクト住所：wxTable-sawyersven

ページレイアウト

シミュレートするために、フレックステーブルレイアウトの主な用途は達成しました。Trと各細胞株の代わりに、それぞれのTDと、原因ので、テーブルができ作るためにスクロールビューを使用し、より多くのコンテンツを表示する必要性に
水平にスライドさせます。

<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）]

各行ダウン上部からグラフ上の各入力は左側に示さ1-6細胞、テーブル見出しの入力を表す（表のすなわち最初の行）

モーダルボックスコード

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

グループのレンダリングのモーダルフレームアウト、タイトルを表示するテキスト、セルの内容となっている入力。

表の編集

レイアウトの終了後、私たちのテーブルの各セルを編集する方法、であるメインイベントを入力します

ある2次元配列である、我々はデータを取得したと仮定します。

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'],
        ]
    }
})

データを取得するために、セルをクリックしてください

当社は、データ-IDによって、各セルがどのテーブルが配列で指定する所属table_indexで、前のページにされてきました

データは次のようになります。ページがそう：

[画像ダンプ外側リンク障害（IMG-H3k1gZiT-1567648625581）（http://test.td/mock/images/3.png）]

我々はopenModal方法における各細胞に結合し、そして対応する着信データ-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を通過させることによって得られます

ショーは：モーダルボックスの表示状態を決定します。

ID：取得したデータのIDに格納されています

変更をコミット

配列に格納された入力値の入力後bindblur入力を修正する方法。

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

    },

最後に、サーバ全体のテーブルのデータが保存されます。

したがって、我々はあなたが、各セルのテーブルを編集することができます実装しました。

あらゆる間違ったかミスがある場合は、そのことを歓迎します。