小程序之修改单条数据

点击按钮弹框修改单条数据

1. 将参数 id 与参数 index 都返回到点击事件 bindtap 中的函数powerDrawer（) 中
2. 通过使用 wx:if="{{}} 判断 showModalStatus 来控制弹窗（默认为false）
3. 进入函数 powerDrawer 中先将 listsing 对象置空避免上一次数据重复，导致修改异常
4. 将返回的下标存储起来
5. 使用 forEach 将初始 list[] 中的数据循环遍历 并判断要修改的数据 id 与 list[] 中的某条数据 id 是否相同，找到相同的 id 后便将数据赋值到 listsing 对象中
6. 将 showModalStatus 改为 true 返回 也就是弹出修改框 ， 并将 listsing 对象中获取到的数据返回到弹框对应的 inpnt 中去
7. bindinput 在输入框输入过程中触发事件 ， 使用 bindinput 事件 将用户在 input 中输入的值返回到 listsing 对象中对应的属性中去
8. 在函数 Update() 中将 list[] 赋值给全局 updateList[] 中， 然后使用 splice(下标，数量，添加对象) 将listsing 对象添加到 updateList[] 中去
9. 返回修改后的数组 ,并关闭窗口

wxml

<view class="table">
		<view class="tr bg-w">
			<view class="th">序号</view>
			<view class="th">器具名称</view>
			<view class="th ">规格/型号</view>
			<view class="th">操作</view>
		</view>
		<block wx:for="{{list}}" wx:for-item="list" wx:key="id">
			<view class="thx">
				<view class="tr bg-g">
					<view class="td">{{list.id}}</view>
					<view class="td">{{list.Appliancename}}</view>
					<view class="td">{{list.Specification}}</view>
					<view class="td">{{}}</view>
				</view>
				<view class="an">
					<button class="update" data-id="{{list.id}}" data-index="{{index}}" bindtap="powerDrawer">修改</button>
				</view>
			</view>
		</block>
	</view>
</view>

// 点击按钮后的弹框内容
<view class="drawer_screen" bindinput="Update" wx:if="{{showModalStatus}}"></view>
<view class="drawer_box" wx:if="{{showModalStatus}}">
	<view class="drawer_title">table</view>
	<view class="drawer_content">
		<view class="top grid">
			<label class="title col-0">器具名称</label>
			<input class="input_base input_h30 col-1" name="rName" focus bindinput="rName" value="{{Appliancename}}"></input>
		</view>
		<view class="top grid">
			<label class="title col-0">规格/型号</label>
			<input class="input_base input_h30 col-1" name="mobile" bindinput="mobile" value="{{Specification}}"></input>
		</view>
	</view>
	<view class="btn_ok" bindtap="Update">确定</view>

js

let updateList = [];
Page({
data: {
    list: [
      {
        id: 1,
        Appliancename: '温度变送器',
        Specification: '测试'
      },
      {
        id: 2,
        Appliancename: 'cece',
        Specification: '测试'
      },
    ],
    showModalStatus: false,
    listsing: {
      id: 0,
      Appliancename: '',
      Specification: ''
    },
    //修改下标
    updateindex:0
  },
  
powerDrawer: function (e) {
    // updateList.splice(0,1,this.data.listsing)
    let newlist = {
      id:0,
      Appliancename:'',
      Specification:''
    }
    this.data.listsing = newlist
    this.data.updateindex = e.currentTarget.dataset.index
    console.log(this.data.listsing)
    this.data.list.forEach(element => {
      if (element.id == e.currentTarget.dataset.id) {
	       this.data.listsing = element
      }
    })
    this.setData(
      {
        showModalStatus: true,
        Appliancename: this.data.listsing.Appliancename,
        Specification: this.data.listsing.Specification
      })
    
  },
  rName: function (e) {
    this.data.listsing.Appliancename = e.detail.value
  },
  mobile: function (e) {
    this.data.listsing.Specification = e.detail.value
  },
  Update: function () {
    updateList = this.data.list;
    console.log(updateList)
    updateList.splice(this.data.updateindex,1,this.data.listsing)
    //关闭 
    this.setData(
      {
        list: updateList,
        showModalStatus: false
      })
  }
  })

wxss

/*修改按钮的样式*/
.an {
  display: flex;
  margin-left: 13em;
  /* border-bottom: 1px solid #0ffa07; */
}

.an button {
  padding: 15rpx 32rpx;
  margin: 10rpx;
  font-size: 30rpx;
  background: #3366FF;
  color: #fff; 
}

/*弹框后的样式*/
.drawer_box {
  width: 650rpx;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1001;
  background: #FAFAFA;
  margin: -150px 50rpx 0 50rpx;
  border-radius: 3px;
}

.drawer_title {
  padding: 15px;
  font: 20px "microsoft yahei";
  text-align: center;
}

.drawer_content {
  height: 210px;
  overflow-y: scroll;
  /*超出父盒子高度可滚动*/
}

.btn_ok {
  padding: 10px;
  font: 20px "microsoft yahei";
  text-align: center;
  border-top: 1px solid #E8E8EA;
  color: #3CC51F;
}

.top {
  padding-top: 8px;
}

.bottom {
  padding-bottom: 8px;
}

.title {
  height: 30px;
  line-height: 30px;
  width: 160rpx;
  text-align: center;
  display: inline-block;
  font: 300 28rpx/30px "microsoft yahei";
}

.input_base {
  border: 2rpx solid #ccc;
  padding-left: 10rpx;
  margin-right: 50rpx;
}

.input_h30 {
  height: 30px;
  line-height: 30px;
}

.input_h60 {
  height: 60px;
}

.input_view {
  font: 12px "microsoft yahei";
  background: #fff;
  color: #000;
  line-height: 30px;
}

input {
  font: 12px "microsoft yahei";
  background: #fff;
  color: #000;
}

radio {
  margin-right: 20px;
}

.grid {
  display: -webkit-box;
  display: box;
}

.col-0 {
  -webkit-box-flex: 0;
  box-flex: 0;
}

.col-1 {
  -webkit-box-flex: 1;
  box-flex: 1;
}

.fl {
  float: left;
}

.fr {
  float: right;
}