Vue.js+Layer表格数据绑定与实现更新的实例

2020-06-16 06:12:32易采站长站整理

area: ["300px", "230px"],
content: $("#updatecontent"),
btn: ["保存"],
yes: function (index) {
alert("点击保存");
},
cancel: function () { //点击关闭按钮
}
});
}

效果如下:

三:为layer弹框提供好数据

传统的做法就是把值一个一个的取出来,然后在赋值给文本框,现在可以使用vue.js一次性绑定好

实例化一个vue专门为弹框内的文本框提供数据


//给更新div添加数据
var update_vm = new Vue({
el: "#updatecontent",
data: {
userinfo: {}
}
});

点击更新按钮的时候我们已经把该行的值通过一个对象传过来了,

直接绑定到vue.js里边


updateu: function (item) //更新
{

update_vm.$data.userinfo = item;

}

这样就能在点击的时候拿到需要更新的数据了

而且由于双向绑定,当文本框发送变化的时候,表格内容也会自动变化

四:点击保存实现更新

传统的做法就是拿到更新后的值,也就是更具id获取文本框的值,然后组装成json对象,传入后台就可以实现更新。

使用vue.js就可以避免

自己组装对象了,因为是双向绑定,文本框的值改变model值自动改变

我们直接把Model的值传回后台实现更新就行了


layer.open({
type: 1,
title: "更新",
area: ["300px", "230px"],
content: $("#updatecontent"),
btn: ["保存"],
yes: function (index) {
//调用后台实现更新
$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {
});
},
cancel: function () { //点击关闭按钮
}
});

后台使用ef直接更新就行了


//更新
public JsonResult UpdateU(Users uinfo)
{
testEntities en = new testEntities();

en.Entry<Users>(uinfo).State = System.Data.EntityState.Modified;