未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

一:先使用Vue.js绑定好数据与更新事件

使用v-on绑定好事件,在事件里边直接把该行数据传递进去,在更新方法里边就可以直接取出需要更新的数据

<div id="content">
<table class="mytable">
<tr class="header">
<td>选择</td>
<td>用户名</td>
<td>学号</td>
<td>班级</td>
<td>操作</td>
</tr>
<tr v-for="item in mydata">
<td><input type="checkbox" :value="item.Id" /></td>
<td>{{item.UserName}}</td>
<td>{{item.Number}}</td>
<td>{{item.Class}}</td>
<td>
<a href="#" rel="external nofollow" rel="external nofollow" v-on:click="udelete(item.Id)">删除</a>
<a href="#" rel="external nofollow" rel="external nofollow" v-on:click="updateu(item)">更新</a>
</td>
</tr>
</table>
</div>
//实例化vue.js(用来给表格提供数据的)
var vm = new Vue({
el: '#content',
data: {mydata: data
},
methods: {udelete: function (_id) //删除{},updateu: function (item) //更新{}
}
});

效果如下:

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

二:点击更新事件弹出layer更新框

先写好html

@* 给layer弹出层提供数据 *@
<div id="updatecontent" style="display:none">
<table style="margin-top:20px;margin-left:23px;">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" v-model="userinfo.UserName" />
</td>
</tr>
<tr>
<td>
学号:
</td>
<td>
<input type="text" v-model="userinfo.Number" />
</td>
</tr>
<tr>
<td>
班级:
</td>
<td>
<input type="text" v-model="userinfo.Class" />
</td>
</tr>
</table>
</div>

弹出layer

updateu: function (item) //更新{ layer.open({ type: 1, title: "更新", area: ["300px", "230px"], content: $("#updatecontent"), btn: ["保存"], yes: function (index) { alert("点击保存"); }, cancel: function () { //点击关闭按钮 } });}

效果如下:

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

三:为layer弹框提供好数据

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

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

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

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

直接绑定到vue.js里边

updateu: function (item) //更新 {
update_vm.$data.userinfo = item; }

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

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

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

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

四:点击保存实现更新

传统的做法就是拿到更新后的值,也就是更具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;

int count = en.SaveChanges();

return Json(count);
}

以上使用vue+layer实现更新,没有任何组织数据的地方,我们子需要关注数据本身就行了

如果在改变文本框值得时候不希望表格内自动改变,可以克隆一个对象在绑定

因为这样如果用户点击了关闭,需要自己会恢复成没有更新的数据

利用jquery克隆一个对象在绑定就而已了

updateu: function (item) //更新
{
//克隆一个对象
var databack = $.extend({}, item);
update_vm.$data.userinfo = databack;
}

这样的话数据库是更新了页面没有被更新,可以直接刷新网页

当然也可以使用更新Model来更新页面,直接把vue.js数据替换从而更新更新到页面

$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {
//可以把vue.js数据替换从而更新更新到页面
vm.$data.mydata.splice(index, index, update_vm.$data.userinfo);
});

以上这篇Vue.js+Layer表格数据绑定与实现更新的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。


您可能感兴趣的文章:vue实现表格增删改查效果的实例代码vue.js通过自定义指令实现数据拉取更新的实现方法vue.js表格组件开发的实例详解vue实现表格数据的增删改查vue实现简单表格组件实例详解

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 数据删除数据库
tags: gt,lt,td,更新,vue,function,tr,js,userinfo,data,vm,绑定,layer,type
分页:12
转载请注明
本文标题:Vue.js+Layer表格数据绑定与实现更新的实例
本站链接:https://www.codesec.net/view/573557.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(49)