重慶分公司
重慶分公司
| 選擇 | 用戶名 | 學(xué)號(hào) | 班級(jí) | 操作 |
| {{item.UserName}} | {{item.Number}} | {{item.Class}} | 刪除 更新 |
一：先使用Vue.js綁定好數(shù)據(jù)與更新事件
成都創(chuàng)新互聯(lián)憑借專業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢(shì)，提供專業(yè)的網(wǎng)站策劃、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù)，在成都十年的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn)，為成都上1000家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。
使用v-on綁定好事件,在事件里邊直接把該行數(shù)據(jù)傳遞進(jìn)去，在更新方法里邊就可以直接取出需要更新的數(shù)據(jù)
//實(shí)例化vue.js(用來(lái)給表格提供數(shù)據(jù)的)
var vm = new Vue({
el: '#content',
data: {
mydata: data
},
methods: {
udelete: function (_id) //刪除
{
},
updateu: function (item) //更新
{
}
}
});效果如下：
二：點(diǎn)擊更新事件彈出layer更新框
先寫好html
@* 給layer彈出層提供數(shù)據(jù) *@
用戶名: 學(xué)號(hào): 班級(jí):
彈出layer
updateu: function (item) //更新
{
layer.open({
type: 1,
title: "更新",
area: ["300px", "230px"],
content: $("#updatecontent"),
btn: ["保存"],
yes: function (index) {
alert("點(diǎn)擊保存");
},
cancel: function () { //點(diǎn)擊關(guān)閉按鈕
}
});
}效果如下：
三：為layer彈框提供好數(shù)據(jù)
傳統(tǒng)的做法就是把值一個(gè)一個(gè)的取出來(lái)，然后在賦值給文本框，現(xiàn)在可以使用vue.js一次性綁定好
實(shí)例化一個(gè)vue專門為彈框內(nèi)的文本框提供數(shù)據(jù)
//給更新div添加數(shù)據(jù)
var update_vm = new Vue({
el: "#updatecontent",
data: {
userinfo: {}
}
}); 點(diǎn)擊更新按鈕的時(shí)候我們已經(jīng)把該行的值通過(guò)一個(gè)對(duì)象傳過(guò)來(lái)了,
直接綁定到vue.js里邊
updateu: function (item) //更新
{
update_vm.$data.userinfo = item;
} 這樣就能在點(diǎn)擊的時(shí)候拿到需要更新的數(shù)據(jù)了
而且由于雙向綁定，當(dāng)文本框發(fā)送變化的時(shí)候，表格內(nèi)容也會(huì)自動(dòng)變化
四：點(diǎn)擊保存實(shí)現(xiàn)更新
傳統(tǒng)的做法就是拿到更新后的值，也就是更具id獲取文本框的值，然后組裝成json對(duì)象，傳入后臺(tái)就可以實(shí)現(xiàn)更新。
使用vue.js就可以避免
自己組裝對(duì)象了，因?yàn)槭请p向綁定，文本框的值改變model值自動(dòng)改變
我們直接把Model的值傳回后臺(tái)實(shí)現(xiàn)更新就行了
layer.open({
type: 1,
title: "更新",
area: ["300px", "230px"],
content: $("#updatecontent"),
btn: ["保存"],
yes: function (index) {
//調(diào)用后臺(tái)實(shí)現(xiàn)更新
$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {
});
},
cancel: function () { //點(diǎn)擊關(guān)閉按鈕
}
});后臺(tái)使用ef直接更新就行了
//更新
public JsonResult UpdateU(Users uinfo)
{
testEntities en = new testEntities();
en.Entry(uinfo).State = System.Data.EntityState.Modified;
int count = en.SaveChanges();
return Json(count);
} 以上使用vue+layer實(shí)現(xiàn)更新，沒(méi)有任何組織數(shù)據(jù)的地方,我們子需要關(guān)注數(shù)據(jù)本身就行了
如果在改變文本框值得時(shí)候不希望表格內(nèi)自動(dòng)改變，可以克隆一個(gè)對(duì)象在綁定
因?yàn)檫@樣如果用戶點(diǎn)擊了關(guān)閉，需要自己會(huì)恢復(fù)成沒(méi)有更新的數(shù)據(jù)
利用jquery克隆一個(gè)對(duì)象在綁定就而已了
updateu: function (item) //更新
{
//克隆一個(gè)對(duì)象
var databack = $.extend({}, item);
update_vm.$data.userinfo = databack;
} 這樣的話數(shù)據(jù)庫(kù)是更新了頁(yè)面沒(méi)有被更新，可以直接刷新網(wǎng)頁(yè)
當(dāng)然也可以使用更新Model來(lái)更新頁(yè)面，直接把vue.js數(shù)據(jù)替換從而更新更新到頁(yè)面
$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {
//可以把vue.js數(shù)據(jù)替換從而更新更新到頁(yè)面
vm.$data.mydata.splice(index, index, update_vm.$data.userinfo);
}); 以上這篇Vue.js+Layer表格數(shù)據(jù)綁定與實(shí)現(xiàn)更新的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。
