业务场景:一串一组表单在微信小程序中由后端获取的json数据循环遍历生成的,我们填好表单后要给后端在传回去。
我们假设这段json是由后端传给我们在前端的遍历的
GoodArr: [
{name:"名称一"},
{name:"名称二"},
{name:"名称三"},
{name:"名称四"}
] // 商品列表
我们在微信小程序中遍历生成表单
<view class="page-body">
<view class="page-section">
<view wx:for="{{GoodArr}}" wx:for-item="goods" wx:key="index" class="weui-cells weui-cells_after-title margintop">
<view class="weui-cell weui-cell_input">
<view>名称</view>
<input value='{{goods.name}}' data-index="{{index}}" bindinput="nameBtn" class="weui-input ipt" maxlength="10" placeholder="请输入名称" />
<view>数量</view>
<input value='{{goods.count}}' data-index="{{index}}" bindinput='countBtn' class="weui-input ipt" maxlength="10" placeholder="请输入数量" />
</view>
<view class="weui-cell weui-cell_input">
<view>物流服务</view>
<checkbox-group name="checkbox" data-index="{{index}}" bindchange="checkboxChange">
<label>
<checkbox value="1"/>配送</label>
<label>
<checkbox value="2"/>代收</label>
</checkbox-group>
</view>
</view>
</view>
<view class="button-sp-area">
<button catchtap='submitBtn'>提交</button>
</view>
</view>
我们要在表单上添加自定义属性data-index,这个是添加循环的表单索引
我们可以获取到e的下面具备索引和value,
let dataset = e.currentTarget.dataset; // 获取索引
let value = e.detail.value; // 获取checkbox选中的数组
我们看到原本后端传给我我们的数据只有name,但是我们回传给服务端的数据要有【数量】和【物流服务】;
所以我们要改造原来的数组添加一下我们需要的属性,这个也根据服务端要求我们定的字段定
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var arr = this.data.GoodArr; // 创建一个数组
for (var i = 0; i < this.data.GoodArr.length;i++){
arr[i].name = this.data.GoodArr[i].name;
arr[i].count = 0; // 添加数量属性count
arr[i].checkedArr = []; // 添加物流服务数组checkedArr
}
this.setData({ // 将新数组赋值给原来的数组,这样GoodArr里面对象就有了count和checkedArr
GoodArr: arr
});
console.log(this.data.GoodArr);
},
设置复选框双向数据绑定
checkboxChange:function(e){ // 复选框
console.log(e);
let dataset = e.currentTarget.dataset; // 获取索引
let value = e.detail.value; // 获取checkbox选中的数组
let arr = this.data.GoodArr;
// console.log(dataset);
arr[dataset.index].checkedArr = value;
this.setData({
checkedArr: arr
})
// console.log(this.data.GoodArr);
},
设置input双向数据绑定
countBtn:function(e){ // 获取数量
let dataset = e.currentTarget.dataset; // 获取索引
let value = e.detail.value; // 获取value
console.log(dataset);
console.log(value);
let arr = this.data.GoodArr;
arr[dataset.index].count = value;
console.log(this.data.GoodArr);
},
获取全部的表单数据
以下贴上全部WXML和JS代码
<!--page/test/test.wxml-->
<text>订单列表</text>
<view class="page-body">
<view class="page-section">
<view wx:for="{{GoodArr}}" wx:for-item="goods" wx:key="index" class="weui-cells weui-cells_after-title margintop">
<view class="weui-cell weui-cell_input">
<view>名称</view>
<input value='{{goods.name}}' data-index="{{index}}" bindinput="nameBtn" class="weui-input ipt" maxlength="10" placeholder="请输入名称" />
<view>数量</view>
<input value='{{goods.count}}' data-index="{{index}}" bindinput='countBtn' class="weui-input ipt" maxlength="10" placeholder="请输入数量" />
</view>
<view class="weui-cell weui-cell_input">
<view>物流服务</view>
<checkbox-group name="checkbox" data-index="{{index}}" bindchange="checkboxChange">
<label>
<checkbox value="1"/>配送</label>
<label>
<checkbox value="2"/>代收</label>
</checkbox-group>
</view>
</view>
</view>
<view class="button-sp-area">
<button catchtap='submitBtn'>提交</button>
</view>
</view>
JS代码
// page/test/test.js
Page({
/**
* 页面的初始数据
*/
data: {
GoodArr: [
{name:"名称一"},
{name:"名称二"},
{name:"名称三"},
{name:"名称四"}
] // 商品列表
},
submitBtn:function(e){ // 提交按钮
console.log(this.data.GoodArr); // 获取全部的表单数据 ,并发请求提交到服务端
},
checkboxChange:function(e){ // 复选框
console.log(e);
let dataset = e.currentTarget.dataset; // 获取索引
let value = e.detail.value; // 获取checkbox选中的数组
let arr = this.data.GoodArr;
// console.log(dataset);
arr[dataset.index].checkedArr = value;
this.setData({
checkedArr: arr
})
// console.log(this.data.GoodArr);
},
countBtn:function(e){ // 获取数量
let dataset = e.currentTarget.dataset; // 获取索引
let value = e.detail.value; // 获取value
console.log(dataset);
console.log(value);
let arr = this.data.GoodArr;
arr[dataset.index].count = value;
console.log(this.data.GoodArr);
},
nameBtn:function(e){
let dataset = e.currentTarget.dataset; // 获取索引
let value = e.detail.value; // 获取value
let arr = this.data.GoodArr;
arr[dataset.index].name = value;
console.log(this.data.GoodArr);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var arr = this.data.GoodArr;
for (var i = 0; i < this.data.GoodArr.length;i++){
arr[i].name = this.data.GoodArr[i].name;
arr[i].count = 0;
arr[i].checkedArr = [];
}
this.setData({
GoodArr: arr
});
console.log(this.data.GoodArr);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {}
})