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


Posted in Javascript onMarch 07, 2018

一:先使用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表格数据绑定与实现更新的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 #Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 #Javascript
Vue中v-for的数据分组实例
Mar 07 #Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 #Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 #Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 #Javascript
在vue项目中,使用axios跨域处理
Mar 07 #Javascript
You might like
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
JS实现留言板功能
2017/06/17 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
军训自我鉴定100字
2014/02/13 职场文书
敬老院标语
2014/06/27 职场文书
会计系毕业求职信
2014/08/07 职场文书
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技