此案例的介紹是在上一個案例的基礎上進行的，如果沒有看過上一個案例的請參考完上一個案例後在進行這個部分的參考
上次我們介紹了頁面間傳值的方法，那麼接着上次的說在跳轉頁面傳值過後要根據傳的值也就是u_id（這裏不明白的請看上一篇文章），來上數據庫中查詢該id對應下的詳細信息（這裏我用的是多表的聯合查詢，具體的sql語句就不詳講了），閒話少說先上代碼：
xxx_x.js
Page({
data: {
array:[],
index: 0,
index1: 0,
//部門
dept:0,
//崗位
post:0,
//點擊修改的時候要傳進去的對象
uId:0
},
//點擊所屬部門的時候觸發的事件
bindPickerChange: function (e) {
console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
// console.log(e.detail.value),
console.log(this.data.uId)
this.setData({
index: e.detail.value,
//同時設置更改後的部門的id
dept: e.detail.value
})
// console.log("收到部門信息")
},
//點擊所屬崗位的時候出發的事件
bindPickerChange1: function (e) {
console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
this.setData({
index1: e.detail.value,
//同時設置更改後的崗位的id
post: e.detail.value
})
},
//點擊修改按鈕的時候出發的事件
modify: function (e) {
//將數據庫中user對應的字段的部門id和崗位id進行修改
console.log("返回數據庫"+this.data.uId+" ,"+this.data.dept+" ,"+this.data.post)
//將要修改的參數定義好
var that = this
var u_id = that.data.uId
var group_id = that.data.dept
var u_type = that.data.post
console.log("請求的參數"+u_id+","+group_id+","+u_type)
//發送ajax請求到服務器修改u_id所對應的部門id和崗位id
wx:wx.request({
url: 'http://localhost:8080/Weixinapp/user/updateByUid.do',
data: {
u_id:u_id,
group_id:group_id,
u_type:u_type
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默認值
},
method: 'POST',
dataType: 'json',
responseType: 'text',
success: function(res) {
console.log("成功")
wx:wx.redirectTo({
url: '../user',
})
},
fail: function(res) {
wx.showToast({
title: '服務器網絡錯誤,請稍後重試',
icon: 'loading',
duration: 1500
})
},
complete: function(res) {
},
})
},
//點擊取消的時候觸發的事件
cancel: function () {
// console.log("取消")
//點擊取消時返回上一級目錄
wx.navigateBack({
delta:1
})
},
//頁面也加載的時候就接收到上一級傳過來的參數併發送請求到數據庫中查詢對應的信息渲染到頁面上
onLoad: function (options) {
var that = this
//收到u_id
// console.log(options)
var u_id = options.u_id
this.uId = options.u_id
// console.log("收到了詳細信息"+u_id)
//發送ajax請求查詢u_id對應的用戶的信息
wx:wx.request({
url: 'http://localhost:8080/Weixinapp/user/findUserByUid.do',
data: {
u_id:u_id
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默認值
},
method: 'POST',
dataType: 'json',
responseType: 'text',
success: function(res) {
console.log(res.data)
console.log(res.data.users)
console.log(res.data.groups)
// console.log(res.data.users[8])
that.setData({
title: res.data.users,
array: res.data.groups,
array1: res.data.posts,
index: res.data.users.group_id,
index1: res.data.users.u_type,
// 設置修改的時候傳過去的uId
uId: res.data.users.u_id
})
},
fail: function(res) {
wx.showToast({
title: '服務器網絡錯誤,請稍後重試',
icon: 'loading',
duration: 1500
})
},
complete: function(res) {
},
})
},
xxx_x.wxml
<view class="container">
<view class="userinfo" data-text="{{title}}">
<image class='userpic' src='../../../images/2.png' ></image>
<text class="username"> {{title.name}}:先生 </text>
</view>
<view class="zan-panel" data-text="{{title}}" >
<view class="zan-cell">
<view class="zan-cell__bd"><text>實名:</text></view>
<view class="zan-cell__ft"><text>{{title.real_name}}</text></view>
</view>
</view>
<view class="zan-panel" >
<view class="zan-cell">
<view class="zan-cell__bd"><text>所屬部門:</text></view>
<view class="zan-cell__ft">
<picker bindchange="bindPickerChange" range-key='group_name' range="{{array}}" data-text="{{index}}" >
<input class="picker" type="text" placeholder="{{array[index].group_name}}" bindinput="teaminput" /> </picker></view>
</view>
<view class="zan-cell">
<view class="zan-cell__bd"><text>所屬崗位:</text></view>
<view class="zan-cell__ft">
<picker bindchange="bindPickerChange1" range-key='u_name' range="{{array1}}" data-text="{{index1}}" >
<input class="picker" type="text" placeholder="{{array1[index1].u_name}}" bindinput="teaminput" /> </picker></view>
</view>
<view class="zan-cell" data-text="{{title}}" >
<view class="zan-cell__bd"><text>註冊手機:</text></view>
<view class="zan-cell__ft"><text>{{title.mobile}}</text></view>
</view>
<view class="zan-cell" data-text="{{title}}">
<view class="zan-cell__bd"><text>註冊時間:</text></view>
<view class="zan-cell__ft"><text>{{title.reg_date}}</text></view>
</view>
</view>
<view class="modify" bindtap="modify" ><text>修改</text></view>
<view class="cancel" bindtap="cancel"><text>取消</text></view>
</view>
運行效果截圖
首先是將u_id對應的信息顯示出來具體代碼也已經給出，當然還有修改的操作
這裏注意的是picker中彈出的數據是從數據庫中獲得的數據，因此在onload事件中請求成功後返回的參數中還得將picker
中所需要的信息都從數據庫中查出來並賦給響應的變量上，這裏我已經用不同顏色的背景標記出來了，當點擊修改按鈕的時候要將
3個參數返回給後臺-u_id,group_id,u_type的值傳過去，後臺數據庫根據傳過來的參數進行修改。具體代碼上面都有標註，希望
可以給大家帶來幫助，我們一起學習共同進步。
至於後臺的範圍在以後會有講解