快捷導(dǎo)航

Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例

更新時間：2018年03月07日 15:30:45 作者：aojiancc2

下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

一：先使用Vue.js綁定好數(shù)據(jù)與更新事件

使用v-on綁定好事件,在事件里邊直接把該行數(shù)據(jù)傳遞進去，在更新方法里邊就可以直接取出需要更新的數(shù)據(jù)

<div id="content">
  <table class="mytable">
    <tr class="header">
      <td>選擇</td>
      <td>用戶名</td>
      <td>學(xué)號</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(用來給表格提供數(shù)據(jù)的)
        var vm = new Vue({
          el: '#content',
          data: {
            mydata: data
          },
          methods: {
            udelete: function (_id) //刪除
            {
            },
            updateu: function (item) //更新
            {
            }
          }
        });

效果如下：

二：點擊更新事件彈出layer更新框

先寫好html

@* 給layer彈出層提供數(shù)據(jù) *@
<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>
        學(xué)號:
      </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 () { //點擊關(guān)閉按鈕
                }
              });
            }

效果如下：

三：為layer彈框提供好數(shù)據(jù)

傳統(tǒng)的做法就是把值一個一個的取出來，然后在賦值給文本框，現(xiàn)在可以使用vue.js一次性綁定好

實例化一個vue專門為彈框內(nèi)的文本框提供數(shù)據(jù)

//給更新div添加數(shù)據(jù) 
   var update_vm = new Vue({ 
     el: "#updatecontent", 
     data: { 
       userinfo: {} 
     } 
   });

點擊更新按鈕的時候我們已經(jīng)把該行的值通過一個對象傳過來了,

直接綁定到vue.js里邊

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

這樣就能在點擊的時候拿到需要更新的數(shù)據(jù)了

而且由于雙向綁定，當文本框發(fā)送變化的時候，表格內(nèi)容也會自動變化

四：點擊保存實現(xiàn)更新

傳統(tǒng)的做法就是拿到更新后的值，也就是更具id獲取文本框的值，然后組裝成json對象，傳入后臺就可以實現(xiàn)更新。

使用vue.js就可以避免

自己組裝對象了，因為是雙向綁定，文本框的值改變model值自動改變

我們直接把Model的值傳回后臺實現(xiàn)更新就行了

 layer.open({
                type: 1,
                title: "更新",
                area: ["300px", "230px"],
                content: $("#updatecontent"),
                btn: ["保存"],
                yes: function (index) {
                  //調(diào)用后臺實現(xiàn)更新
                  $.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {
                  });
                },
                cancel: function () { //點擊關(guān)閉按鈕
                }
              });

后臺使用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實現(xiàn)更新，沒有任何組織數(shù)據(jù)的地方,我們子需要關(guān)注數(shù)據(jù)本身就行了

如果在改變文本框值得時候不希望表格內(nèi)自動改變，可以克隆一個對象在綁定

因為這樣如果用戶點擊了關(guān)閉，需要自己會恢復(fù)成沒有更新的數(shù)據(jù)

利用jquery克隆一個對象在綁定就而已了

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

這樣的話數(shù)據(jù)庫是更新了頁面沒有被更新，可以直接刷新網(wǎng)頁

當然也可以使用更新Model來更新頁面，直接把vue.js數(shù)據(jù)替換從而更新更新到頁面

$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) { 
              
  //可以把vue.js數(shù)據(jù)替換從而更新更新到頁面 
  vm.$data.mydata.splice(index, index, update_vm.$data.userinfo); 
});

以上這篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: