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 相关文章推荐
javascript开发中因空格引发的错误
Nov 08 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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 实现explort() 功能的详解
2013/06/20 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php的sso单点登录实现方法
2015/01/08 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
Javascript实现单例模式
2016/01/24 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
js对象简介与基本用法示例
2020/03/13 Javascript
python之import机制详解
2014/07/03 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python实现单向链表详解
2018/02/08 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python基于SMTP协议发送邮件
2019/05/31 Python
python的debug实用工具 pdb详解
2019/07/12 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
Python如何把Spark数据写入ElasticSearch
2020/04/18 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
平面设计岗位职责
2013/12/14 职场文书
银行领导证婚词
2014/01/11 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
保密工作整改报告
2014/11/06 职场文书
降价通知函
2015/04/23 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS