小程序双层数据如何渲染以及单选全选事件

 如果data中的数据是以下格式 假设我们需要单选全选的是orderItem层的数据 就需要给本层设置唯一标识符id以及默认选中状态selected为false  再设置一个全选按钮allChecked的选中状态

 resultList: [

      {

        fenjieItems: [

         

        ],

        orderItem: {

          id: 1, selected: false,

        }

      },

      {

        fenjieItems: [

         

        ],

        orderItem: {

          id: 2, selected: false,

        }

      },

    ],

  allChecked:false,

在页面中我们就需要这样渲染  注意！ 因为我们需要渲染的是orderItem层 就需要把单选框和orderItem层放在同一级别下

  <view class="wuliao" a:for="{{resultList}}" a:key="index" data-index="{{index}}">

    <view class="wuliaofont" onTap="handleTap" data-item="{{item}}" data-index="{{index}}">

        <view class="wuliaofonto">品号：{{item.orderItem['品牌']}}</view>

        <view class="wuliaofonto">型号：{{item.orderItem['规格型号']}}</view>

        <view class="fenjie-items" a:for="{{item.fenjieItems}}" data-item="{{item}}"                a:key="index" data-index="{{index}}">

          <view class="dongbafenjie">

              <view class="wuliaofenjie">材料编码：{{item['生产对象']}}</view>

              <view class="wuliaofenjie">应配数量：{{item['拣货数量']}}</view>         

          </view>

      </view>

    </view>

    <checkbox-group onChange="onOneChange" data-index="{{index}}"  style="margin-top:20rpx">

      <!-- 这里需要注意，checkbox 的 value 应该传入对应的 id 或者唯一标识符 并也定要逐层找到我们需要的item.orderItem.selected层里面的selected-->

      <checkbox value="{{item.id}}" checked="{{item.orderItem.selected}}" style="border-radius:50rpx;" />

    </checkbox-group>

</view>

 // 以下是全选按钮

 <checkbox-group onChange="onToggleAll">

      <checkbox value="{{0}}" checked="{{allChecked}}" style="border-radius:50rpx;" />

    </checkbox-group>

 

以下为js 

  // 单选事件

  onOneChange: function(e) {

    const index = e.currentTarget.dataset.index;

    const resultList = this.data.resultList;

    resultList[index].orderItem.selected = !resultList[index].orderItem.selected;         //只针对当前点击的索引的item取反

    this.setData({

        resultList: resultList

    });

    console.log("打印单选的选中状态数据",resultList);

},

// 全选事件

onToggleAll: function(e) {

  const checked = !this.data.allChecked;        // 取反当前的全选状态

  const resultList = this.data.resultList;

  resultList.forEach(item => {                        //遍历所有的item取反

      item.orderItem.selected = checked;

  });

  this.setData({

      resultList: resultList,

      allChecked: checked

  });

  console.log("打印全选的选中状态数据",resultList);

},

 

注意！此文章为钉钉小程序 如果写微信小程序 只需把把事件换成微信小程序的即可