Vue.js+Layer 표 데이터 바 인 딩 및 업데이트 인 스 턴 스

1:먼저 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) //  
            {
            }
          }
        });

효 과 는 다음 과 같 습 니 다:

2.업데이트 이벤트 팝 업 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>

팝 업 레이 어

  updateu: function (item) //  
            {          
              layer.open({
                type: 1,
                title: "  ",
                area: ["300px", "230px"],
                content: $("#updatecontent"),
                btn: ["  "],
                yes: function (index) {
                  alert("    ");
                },
                cancel: function () { //      
                }
              });
            }

효 과 는 다음 과 같 습 니 다:

3.layer 탄 상자 에 좋 은 데 이 터 를 제공 합 니 다.
전통 적 인 방법 은 값 을 하나씩 꺼 내 서 텍스트 상자 에 할당 하 는 것 입 니 다.지금 은 vue.js 를 사용 하여 한꺼번에 연결 할 수 있 습 니 다.
탄 상자 안의 텍스트 상자 에 데 이 터 를 제공 하 는 vue 를 예화 합 니 다.

//   div     
   var update_vm = new Vue({ 
     el: "#updatecontent", 
     data: { 
       userinfo: {} 
     } 
   }); 

업데이트 단 추 를 눌 렀 을 때 우 리 는 이미 이 줄 의 값 을 한 대상 을 통 해 전 달 했 습 니 다.
vue.js 에 직접 연결

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

이렇게 하면 클릭 할 때 업데이트 할 데 이 터 를 얻 을 수 있 습 니 다.

또한 양 방향 연결 로 인해 텍스트 상자 가 변 화 를 보 낼 때 표 의 내용 도 자동 으로 변 합 니 다.

4:저장 을 클릭 하여 업데이트 실현
전통 적 인 방법 은 업 데 이 트 된 값 을 가 져 오 는 것 이다.즉,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 () { //      
                }
              });

백 엔 드 에 프 를 사용 해서 바로 업데이트 하 시 면 됩 니 다.

//   
  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 표 데이터 바 인 딩 과 업 데 이 트 를 실현 하 는 인 스 턴 스 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주시 기 바 랍 니 다.