小程序之添加

添加单条数据

1. 通过点击事件 bindtap 点击添加按钮进入函数 insert中，先将所有对象置空并返回，打开弹框
2. 将输入框中获取到的值存入对象中
3. 将对象添加到数组中，并返回数组，关闭弹框

wxml

<button class="newlyadded" bindtap="insert"><text>{{newlyadded}}</text></button> //新增按钮
<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>
		<checkbox-group bindchange="checkboxChange">		// 多选框
		<block wx:for="{{list}}" wx:for-item="list" wx:if="{{list.isDeletes}}" 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>
					<checkbox class="td" value="{{list.id}}" checked="{{item.checked}}"/>
				</view>
			</view>
		</block>
	</checkbox-group>
	</view>
</view>
//弹框添加
<view class="drawer_screen" bindinput="powerDrawer" 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="powerDrawer">确定</view>
</view>

js

data: {
	newlyadded: '新增',
    list: [
      {
        id: 1,
        Appliancename: '温度变送器',
        Specification: '测试',
        isDeletes: true
      },
      {
        id: 2,
        Appliancename: 'cece',
        Specification: '测试',
        isDeletes: true
      },
    ],
    showModalStatus: false,
    listsing: {
      id: 0,
      Appliancename: '',
      Specification: '',
      isDeletes: true
    }
  },

insert: function () { // 新增
    let newlist = {
      id: 0,
      Appliancename: '',
      Specification: '',
      isDeletes: true
    }
    this.data.listsing = newlist	//将对象置空
    this.setData({	//打开弹窗，并将其中各属性置空
      showModalStatus: true,
      Appliancename: '',
      Specification: ''
    })
  },
   rName: function (e) {
      this.data.listsing.Appliancename = e.detail.value //获取输入框中的用户输入

  },
  mobile: function (e) {
      this.data.listsing.Specification = e.detail.value	//获取输入框中的用户输入
  },
  powerDrawer: function () {  //点击确认
      this.data.listsing.id = this.data.list.length + 1	//控制Id
      updateList = this.data.list	// 将原数据进行赋值
      updateList.push(this.data.listsing)  // 将用户添加的数据添加到数组当中
      this.setData(// 返回数据，关闭弹框
        {
          list: updateList,
          showModalStatus: false
        })
    }
  },

wxss

.top {
  display: flex;
  /* flex-direction: row; */
}

.top button {
  background-color: white;
  width: 70px;
  color: rgb(250, 9, 9);
  border: 2px solid #fa0404;
}

.top .mark {
  background-color: white;
  color: rgb(8, 215, 252);
  border: 2px solid #04c1fa;
}

.statistics {
  display: flex;
  margin: 50rpx;
}

.tablename {
  display: flex;
  padding-top: 50rpx;
  background-color: rgb(102, 134, 240);
  width: 800rpx;
  height: 100rpx;
}

.tablename text {
  margin-left: 50rpx;
}

.table {
  border: 0px solid darkgray;
}

.table .thx{
  border-bottom: 2px solid #c5c1c5;
}

.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}

.td {
  width: 40%;
  justify-content: center;
  text-align: center;
}

/* 重写 checkbox 样式 */
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
  border-radius: 50%;/* 圆角 */
  width: 46rpx; /* 背景的宽 */
  height: 46rpx; /* 背景的高 */
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  border: 1rpx solid #FF783B;
  background: #FF783B;
}
/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  border-radius: 50%;/* 圆角 */
  width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
  height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 40rpx;
  text-align: center;
  font-size:30rpx; /* 对勾大小 30rpx */
  color:#fff; /* 对勾颜色 白色 */
  background: transparent;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
}

.bg-w {
  background: snow;
}

.th {
  width: 40%;
  justify-content: center;
  background: #3366FF;
  color: #fff;
  display: flex;
  height: 3rem;
  align-items: center;
}

.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;
  
}

.an .delete {
  background: #fd0202;
  margin: 10rpx;
}


/*mask*/

.drawer_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}

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



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