樣例：
樣式展示
數(shù)據(jù)庫(kù)中原始第一條數(shù)據(jù)
?修改表格第一行的數(shù)量：
數(shù)據(jù)庫(kù)結(jié)果?
?
?核心代碼
wxml
①wx:for:執(zhí)行循環(huán)將數(shù)組數(shù)據(jù)展示出來(lái)
②在某一單元格加上input樣式
③在input中綁定：文本框改變事件，并且綁定data-index便于知道改變的具體是哪一行的數(shù)據(jù)
<!-- 表格 -->
<view class="table_position">
<view class="table">
<view class="table-tr">
<view class="table-th1">順序</view>
<view class="table-th2">制程</view>
<view class="table-th3">數(shù)量</view>
</view>
<view class="table-tr" wx:for="{{allinfo}}" wx:key="unique">
<view class="table-td1">{{item.operation_seq_num}}</view>
<view class="table-td2">{{item.operation_code}}</view>
<view class="table-td3">
<view class="input_position">
<input type="text" value="{{item.begin_quantity}}" class="input" bindinput="inputChange" data-index="{{index}}"/>
</view>
</view>
</view>
</view>
</view>
<!--開(kāi)始生產(chǎn)的按鈕-->
<view class="start">
<view class="button_text" bindtap="start_produce">開(kāi)始生產(chǎn)</view>
</view>wxss
/* 表格樣式 */
.table_position{
padding:15px;
}
.table {
display: table;
width: 100%;
border-collapse: collapse;
box-sizing: border-box;
}
.table-tr {
display: table-row;
}
.table-th1 {
width:10%;
display: table-cell;
font-weight: bold;
border: 1rpx solid white;
background-color:#51aad6;
text-align: center;
vertical-align: middle;
padding: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.table-th2 {
width:20%;
display: table-cell;
font-weight: bold;
border: 1rpx solid white;
background-color:#51aad6;
text-align: center;
vertical-align: middle;
padding: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.table-th3 {
width:15%;
display: table-cell;
font-weight: bold;
border: 1rpx solid white;
background-color:#51aad6;
text-align: center;
vertical-align: middle;
padding: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
}
.table-td1{
width:10%;
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
border: 1rpx solid white;
background-color:#aacee0;
}
.table-td2 {
width:20%;
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
border: 1rpx solid white;
background-color:#aacee0;
}
.table-td3 {
width:15%;
display: table-cell;
text-align: center;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
border: 1rpx solid white;
background-color:#aacee0;
/* padding: 5px 0; */
}
/* 輸入框的樣式 */
.input_position{
display: flex;
justify-content: center;
align-items: center;
}
.input{
background-color:rgb(255, 255, 255);
width:70%;
text-align:left;
}
/* 開(kāi)始訓(xùn)練的按鈕 */
.start{
margin-top:10%;
width:100%;
display: flex;
justify-content:center;
align-items: center;
}
.button_text{
background-color:rgb(245, 196, 196);
width:90%;
text-align:center;
padding:2%;
}js
①變更input，獲取表格的全部數(shù)據(jù)
1° event.currentTarget.dataset.index：獲取行信息
2°?event.detail.value：獲取輸入的數(shù)據(jù)值
3°?this.data.allinfo：獲取原數(shù)組的信息
4°?allinfo[index].begin_quantity = newValue;：找到修改的行的信息，將這一行對(duì)應(yīng)的文本框的值修改為用戶輸入的值
// 輸入框內(nèi)容改變時(shí)，更新對(duì)應(yīng)數(shù)據(jù)
inputChange: function (event) {
var index = event.currentTarget.dataset.index;
var newValue = event.detail.value;
var allinfo = this.data.allinfo;
allinfo[index].begin_quantity = newValue;
this.setData({
allinfo: allinfo
});
console.log(this.data.allinfo)
},②點(diǎn)擊開(kāi)始按鈕執(zhí)行事件
1°提示確認(rèn)圖片展示
2°JSON.stringify(this.data.allinfo)：將數(shù)組轉(zhuǎn)換為json格式便于后端處理
//開(kāi)始生產(chǎn)
start_produce(){
wx.showModal({
title:'生產(chǎn)確認(rèn)',
content: '確認(rèn)生產(chǎn)'+this.data.order_number+'?',
success:res=>{
//點(diǎn)擊確認(rèn)
if(res.confirm){
wx.request({
url: app.globalData.position + 'Produce/start_produce',
data: {
order_number: this.data.order_number,
username: app.globalData.username,
allinfo:JSON.stringify(this.data.allinfo)
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
dataType: 'json',
success: res => {
console.log(res.data)
this.onLoad()
},
fail(res) {
console.log("查詢失敗")
}
})
}
//點(diǎn)擊取消
else{
console.log('用戶點(diǎn)擊了取消')
}
}
})
}js完整代碼
const app = getApp()
Page({
//數(shù)據(jù)信息
data: {},
//剛進(jìn)入頁(yè)面執(zhí)行的操作
onLoad(options) {
var pages = getCurrentPages()
var currentPage = pages[pages.length - 1] //獲取當(dāng)前頁(yè)面的對(duì)象
var options = currentPage.options //如果要獲取url中所帶的參數(shù)可以查看options
this.setData({
order_number: options.order_number
})
//查詢單號(hào)對(duì)應(yīng)的信息
wx.request({
url: app.globalData.position + 'Produce/select_operation',
data: {
order_number: this.data.order_number,
username: app.globalData.username
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
dataType: 'json',
success: res => {
console.log(res.data)
this.setData({
allinfo: res.data.info,
employee_name: res.data.employee_name
})
},
fail(res) {
console.log("查詢失敗")
}
})
// console.log(options.order_number)
},
// 輸入框內(nèi)容改變時(shí)，更新對(duì)應(yīng)數(shù)據(jù)
inputChange: function (event) {
var index = event.currentTarget.dataset.index;
var newValue = event.detail.value;
var allinfo = this.data.allinfo;
allinfo[index].begin_quantity = newValue;
this.setData({
allinfo: allinfo
});
console.log(this.data.allinfo)
},
//開(kāi)始生產(chǎn)
start_produce(){
wx.showModal({
title:'生產(chǎn)確認(rèn)',
content: '確認(rèn)生產(chǎn)'+this.data.order_number+'?',
success:res=>{
//點(diǎn)擊確認(rèn)
if(res.confirm){
wx.request({
url: app.globalData.position + 'Produce/start_produce',
data: {
order_number: this.data.order_number,
username: app.globalData.username,
allinfo:JSON.stringify(this.data.allinfo)
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
dataType: 'json',
success: res => {
console.log(res.data)
this.onLoad()
},
fail(res) {
console.log("查詢失敗")
}
})
}
//點(diǎn)擊取消
else{
console.log('用戶點(diǎn)擊了取消')
}
}
})
}
})
PHP
①json_decode($_POST['allinfo'], true);將前端傳來(lái)的json格式的數(shù)組解析為普通數(shù)組
②對(duì)數(shù)組進(jìn)行循環(huán)
③獲取數(shù)組中每項(xiàng)對(duì)應(yīng)的id文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-601599.html
④根據(jù)id，去修改數(shù)據(jù)庫(kù)中的單項(xiàng)值文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-601599.html
public function start_produce(){
$wip_entity_name = input('post.order_number');
$username = input('post.username');
$allinfo = json_decode($_POST['allinfo'], true);
for($i = 0 ; $i<count($allinfo); $i++){
//獲取數(shù)組中的每行的id
$id = $allinfo[$i]['wip_operation_id'];
// 更改數(shù)據(jù)庫(kù)中每站開(kāi)始數(shù)量的值
db::table('wip_operation_plan')
->where(
[
'wip_operation_id'=>$id
]
)
->update(
[
'begin_quantity'=>$allinfo[$i]['begin_quantity']
]
);
}
$data['info'] = db::table('wip_operation_plan')->where(['wip_entity_name'=>$wip_entity_name])->select();
echo json_encode($data);
}到了這里，關(guān)于微信小程序：表格中更改輸入框的值，實(shí)時(shí)獲取表格全部數(shù)據(jù)，點(diǎn)擊按鈕更改數(shù)據(jù)庫(kù)指定項(xiàng)數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
