WeChatアプレットのチェックボックス

WeChatアプレットを2日間使用した後、TMDは非常に便利で、JSははるかに少なく、レスポンシブレイアウトは開発者に多くのことを節約してくれることに気付きました。

これがhtmlコードです

        <view class="weui-cells weui-cells_form">
          <view class="weui-cell weui-cell_active {{isWaring ? 'weui-cell_warn' : ''}}">
            <view class="weui-cell__hd">
              <label class="weui-label">跟单</label>
            </view>
            <view class="tui-content">
              <checkbox-group bindchange="checkboxChange2">
                <label class="checkbox" wx:for="{{gendanItems}}">
                  <view class="tui-menu-list">
                    <checkbox value="{{item.empNo}}" checked='{{filter.isChecked2(item.empNo,selectData2)}}' />{{item.name}}</view>
                </label>
              </checkbox-group>
            </view>
          </view>
        </view>

ここでは、これをhtmlコードで記述し、主にjsファイルにエコーしました。オブジェクトのchecked属性に1つずつtrueを割り当てる必要があります。

  <wxs module="filter">
    var isChecked2 = function(empNo, data) {
      if (empNo != null) {
        return data.indexOf(empNo) != -1 ? true : false;
      }
      return false;
    }

    module.exports = {
       isChecked2: isChecked2,
    }
  </wxs>

gendanItemsはコレクションオブジェクトで、バックエンドのjavaで記述し、リスト<bean>がバックエンドから渡されます。

selectData2は、私のjsでキャプチャされた選択された配列です。

コードを貼り付けます

 

  showClearBtn: false,
    selectData2: []  //记住要给个初始值，不然会报错，就这样[]也都可以。
  },


  checkboxChange2: function(e) {
    var up = "pho.gendans2"; //pho是个对象后面的gendans2就是selectData2 可以直接拿给它
    this.setData({
      [up]: e.detail.value
    });
  },

それだけです。