用户名:
弹出layer
rush:xhtml;">
updateu: function (item) //更新
{
layer.open({
type: 1,title: "更新",area: ["300px","230px"],content: $("#updatecontent"),btn: ["保存"],yes: function (index) {
alert("点击保存");
},cancel: function () { //点击
关闭按钮
}
});
}
效果如下：
三：为layer弹框提供好数据
传统的做法就是把值一个一个的取出来，然后在赋值给文本框，现在可以使用vue.js一次性绑定好
实例化一个vue专门为弹框内的文本框提供数据
rush:xhtml;">
//给更新div
添加数据
var update_vm = new Vue({
el: "#updatecontent",data: {
userinfo: {}
}
});
点击更新按钮的时候我们已经把该行的值通过一个对象传过来了,
直接绑定到vue.js里边
rush:xhtml;">
updateu: function (item) //更新
{
update_vm.$data.userinfo = item;
} </pre>
这样就能在点击的时候拿到需要更新的数据了
而且由于双向绑定，当文本框发送变化的时候，表格内容也会自动变化
四：点击保存实现更新
传统的做法就是拿到更新后的值，也就是更具id获取文本框的值，然后组装成json对象，传入后台就可以实现更新。
使用vue.js就可以避免
自己组装对象了，因为是双向绑定，文本框的值改变model值自动改变
我们直接把Model的值传回后台实现更新就行了
rush:xhtml;">
layer.open({
type: 1,yes: function (index) {
//
调用后台实现更新
$.post('/home/UpdateU',update_vm.$data.userinfo,function (result) {
});
},cancel: function () { //点击
关闭按钮
}
});
后台使用ef直接更新就行了
rush:xhtml;">
//更新
public JsonResult UpdateU(Users uinfo)
{
testEntities en = new testEntities();
en.Entry<Users>(uinfo).State = Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.Data.EntityState.Modified;
int count = en.SaveChanges();
return Json(count);
}
以上使用vue+layer实现更新，没有任何组织数据的地方,我们子需要关注数据本身就行了
如果在改变文本框值得时候不希望表格内自动改变，可以克隆一个对象在绑定
因为这样如果用户点击了关闭，需要自己会恢复成没有更新的数据
利用jquery克隆一个对象在绑定就而已了
rush:xhtml;">
updateu: function (item) //更新
{
//克隆
一个对象
var databack = $.extend({},item);
update_vm.$data.userinfo = databack;
}
这样的话数据库是更新了页面没有被更新，可以直接刷新网页
当然也可以使用更新Model来更新页面，直接把vue.js数据替换从而更新更新到页面
rush:xhtml;">
$.post('/home/UpdateU',function (result) {
//可以把vue.js数据替换从而更新更新到页面
vm.$data.mydata.splice(index,index,update_vm.$data.userinfo);
});
以上这篇Vue.js+Layer表格数据绑定与实现更新的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
