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

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

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

选择用户名学号班级操作
{{item.UserName}}{{item.Number}}{{item.Class}}

删除

更新

//实例化vue.js(用来给表格提供数据的)

var vm = new Vue({

el: '#content',

data: {

mydata: data

},

methods: {

udelete: function (_id) //删除

{

},

updateu: function (item) //更新

{

}

}

});

效果如下:

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

先写好html

@* 给layer弹出层提供数据 *@

用户名:

学号:

班级:

弹出layer

updateu: function (item) //更新

{

layer.open({

type: 1,

title: "更新",

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(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表格数据绑定与实现更新的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据流图的画法

数据流图的画法 数据流图也称为数据流程图date flow diagram , DFD,是一种便于用户理解和分析系统数据流程的图形工具,他摆脱了系统和详细内容,精确的在逻辑上描写叙述系统的功能、输入、输出和数据存储等,是系统逻辑模型的重要组…

linux之自己总结学习linux的资源推荐

1、学习linux前辈的网站 安卓和linux网络编程 http://www.cnblogs.com/hnrainll/ IBM学习linux技术地址: https://www.ibm.com/developerworks/cn/views/linux/libraryview.jsp 2、学习linux的途径,或者说过程 1、APUE再深读 – 尤其是进程,线程,IPC,套接字 2、 多…

01-算法简介

数据结构和算法 基于《算法图解》—Aditya Bhargava和《数据结构》—严蔚敏 ** 算法图解:(基于Python)* 第1章—算法简介 1.1 引言 算法是一组完成任务的指令。 1.2 二分查找(binary_search) 二分查找是一种算法,其输入是一个…

浏览器渲染机制面试_【前端面试必考题】页面渲染机制(一)

页面渲染机制这部分内容会分成两篇来进行讲解,这两篇里我们准备聊一下页面的渲染的过程,包括页面的加载、DOM 树的构建、CSSOM 树的构建、渲染树的构建和最后的渲染过程等。浏览器的渲染机制和网页的优化息息相关,只有知道了页面是怎么渲染出…

OpenJudge/Poj 1226 Substrings

1.链接地址: http://bailian.openjudge.cn/practice/1226/ http://poj.org/problem?id1226 2.题目: 总时间限制:1000ms内存限制:65536kB描述You are given a number of case-sensitive strings of alphabetic characters, find the largest string X, s…

MFC继承表

转载于:https://www.cnblogs.com/Lthis/p/4264967.html

linux之fdisk查看分区和mkfs.ext3删除分区和mount挂载和e2label添加卷标使用总结

一、使用fdisk、mkfs.ext3、和mount、e2lable的原因 有个分区挂载不上,然后需要格式化分区,还需要添加卷标 二、fdisk、mkfs.ext3、mount、e2lable命令介绍 1、fdisk命令介绍 1)、了解分区 分区是将一个硬盘驱动器分成若干个逻辑驱动器,分区是把硬盘连续的区块当做一个…

Task+ConcurrentQueue多线程编程

队列&#xff08;Queue&#xff09;代表了一个先进先出的对象集合。当您需要对各项进行先进先出的访问时&#xff0c;则使用队列。当您在列表中添加一项&#xff0c;称为入队&#xff0c;当您从列表中移除一项时&#xff0c;称为出队。ConcurrentQueue<T>队列是一个高效的…

怎样从一个手机上安两个不同版本的软件_怎么在一部手机上安装两个不同版本的微信?...

今天我们就向大家介绍一个非常简便的方法&#xff0c;帮助我们实现在Android智能手机将应用程序多开。1、安卓微信双卡方法&#xff1a;准备工作从上图我们可以看到&#xff0c;小编在自己的手机上已经安装了两个不同版本的微信。通常在自己的手机上安装同一应用程序时&#xf…

牛人的英语学习方法

牛人的英语学习方法&#xff1a; 总结1&#xff1a;背出来的单词 不背熟单词就去学所谓的听力阅读作文语法&#xff0c;就像没学走路就想学跑步&#xff0c;没吃饭就想拉屎&#xff0c;没脱牛仔裤就想脱内裤一样的痴心妄想。所以想学英语的人要做的第一件事&#xff0c;不是哭&…

02-选择排序

数据结构和算法 基于《算法图解》—Aditya Bhargava和《数据结构》—严蔚敏 第2章 2.1 内存的工作原理 计算机就像是很多抽屉的集合体&#xff0c;每个抽屉都有地址。需要将数据存储到内存是&#xff0c;请求计算机提供存储空间&#xff0c;计算机则分配一个地址。需要存储多…

[SAP ABAP开发技术总结]权限对象检查

20.14. 权限检查 AT SELECTION-SCREEN. DATA: BEGIN OF lt_bukrs OCCURS 0, bukrs TYPE t001-bukrs, END OF lt_bukrs. SELECT bukrs FROM t001 INTO CORRESPONDING FIELDS OF TABLE lt_bukrs WHERE bukrs IN s_bukrs. LOOP AT lt_bukrs. AUTHORITY-C…

linux c之strncpy函数和strncmp函数最简单使用总结

1.原型声明&#xff1a; char * strncpy(char *dest,const char *src, size_t n); strncmp() 用来比较两个字符串的前n个字符&#xff0c;区分大小写&#xff0c;其原型为&#xff1a; int strncmp ( const char * str1, const char * str2, size_t n ); 若str1与str2的前n…

使用ssh tunnel 来做代理或跳板

接前文 http://www.cnblogs.com/piperck/p/6188984.html 使用ssh config配置文件来管理ssh连接 前文说了如何配置自己的ssh config 来方便的管理自己的ssh连接&#xff0c;以及如何使用ssh-add来将自己密钥密码存储起来。接下将讨论一下使用ssh来做转发和跳板的相关实践。 首先…

阻止你变现的,从来都不是开源许可证

文 | lola_chen出品 | OSC开源社区&#xff08;ID&#xff1a;oschina2013&#xff09;之前&#xff0c;《GPL 转闭源&#xff1f;法院判决&#xff1a;一日 GPL 终身 GPL》一文提出一个冷门却又重要的知识点&#xff1a;GPL 许可证之下的开源项目&#xff0c;可以分叉出来闭源…

yum 常用命令

yum是一个用于管理rpm包的后台程序&#xff0c;用python写成&#xff0c;可以非常方便的解决rpm的依赖关系。在建立好yum服务器后&#xff0c;yum客户端可以通过 http、ftp方式获得软件包&#xff0c;并使用方便的命令直接管理、更新所有的rpm包&#xff0c;甚至包括kernel的更…

sparkshelljarlib_Spark应用程序第三方jar文件依赖解决方案

第一种方式操作&#xff1a;将第三方jar文件打包到最终形成的spark应用程序jar文件中应用场景&#xff1a;第三方jar文件比较小&#xff0c;应用的地方比较少第二种方式操作&#xff1a;使用spark-submit提交命令的参数: --jars要求&#xff1a;1、使用spark-submit命令的机器上…

hdu 1460 完数

注意&#xff1a;num1和num2的大小未知&#xff0c;需比较&#xff01; 有两种方法&#xff1a; 法一&#xff1a;素数打印素数分解&#xff08;求因数和公式&#xff09; 1 #include<iostream>2 #include<cstring>3 #include<cstdio>4 #include<string&g…

03-递归

数据结构和算法 基于《算法图解》—Aditya Bhargava和《数据结构》—严蔚敏 第3章 递归 3.1 递归 假设在一堆嵌套的盒子里找钥匙&#xff0c;对比循环和递归。 使用循环解决&#xff1a; #使用while循环&#xff1a;只要盒子堆不是空&#xff0c;就从中取出一个盒子&#x…

linux c之提示format‘%d’ expects argument of type ‘int’, but argument 2 has type ‘long int’ [-Wformat

1、问题 有个long int data;我输出的时候printf("data is %d", data);出现下面警告 自己竟然不知道 长整型怎么打印出来&#xff0c;日了狗。 2、解决办法 md&#xff0c;m为指定的输出字段的宽度。如果数据的位数小于m&#xff0c;则左端补以空格&#xff0c;若大…