微信小程序多选框

用了两天微信小程序后发现，真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属性赋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写的，从后端传过来的是一个List<bean>，这里大家就可以理解了吧。

selectData2是我js里捕获到的选中的数组。

贴上代码

 

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


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

这样就大功告成啦。