data 변경시 화면에 반영이 안되는 경우 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

VueJS data 변경시 화면에 반영이 안되는 경우

페이지 정보

작성자 nice 작성일 21-07-22 18:16 조회 31회 댓글 2건
제품 버전 : 5.20202.699
컨트롤 이름 : 그리드

본문

안녕하세요.

항상 자세한 답변 감사드리며 질문하나 드리겠습니다.


vue js 을 사용합니다.


=> jsp 

===========================================================================================

<script language="javascript1.2" type="text/javaScript">


     var data2 = [];

    var vue1  = null;


     data2.push({productaa:'a11', productbb:'b1', productcc:'c1', productdd:'d1', productee:'e1'});

    data2.push({productaa:'a1', productbb:'b2', productcc:'c3', productdd:'d4', productee:'e5'});

   

    var dataheader = [{ cells: [ { binding: 'productaa', header: 'Product-a' }]}

                     ,{ cells: [ { binding: 'productbb', header: 'Product-b' }]}

                     ,{ cells: [ { binding: 'productcc', header: 'Product-c' }]}

                     ,{ cells: [ { binding: 'productdd', header: 'Product-d' }]}

                     ,{ cells: [ { binding: 'productee', header: 'Product-e' }]}

                      ]; 


// 버튼 클릭 이벤트 

function test1()

{

var datavue = vue1.$data.data;

        

    data2.push({productaa:'1a1', productbb:'1b1', productcc:'1c1', productdd:'1d1', productee:'1e1'});

    data2.push({productaa:'1a1', productbb:'1b1', productcc:'1c1', productdd:'1d1', productee:'1e1'});

    data2.push({productaa:'1a1', productbb:'1b1', productcc:'1c1', productdd:'1d1', productee:'1e1'});

   

    vue1.$data.data[0].productaa="1112222";

   

vue1.$data.data  = data2; 

}


System.import('${pageContext.request.contextPath}/vuejs/app2.vue');

</script>


<body>

<div id="app2">

</div>

<button type="button" class="btn-sm" onclick="javascript:test1();"> 데이터변경 </button>

</body>

==========================================================================


=> app2.vue

==========================================================================

<template>

  <div class="container-fluid">


       <label>

            Custom Headers:

            <input

                type="checkbox"

                checked @click="checkboxClicked($event)"/>

        </label> 


      <p>다시 합시다. </p>


      <wj-multi-row

            :itemsSource="data"

            :layoutDefinition="layout1"

            :headerLayoutDefinition="headerLayout1"

        ></wj-multi-row>

  </div>

</template>


<script>

    import "@grapecity/wijmo.styles/wijmo.css";

    import "bootstrap.css";

    import Vue from "vue";

    

    import "@grapecity/wijmo.vue2.grid";

    import "@grapecity/wijmo.vue2.grid.multirow";


    import * as wjcGrid from '@grapecity/wijmo.grid';

    

    import { getData, getLayoutDefinition, getHeaderLayoutDefinition } from './data2.js';


    

    vue1 = new Vue({

        el: "#app2"

      , data: function() 

        {

            let customHeaderLayout = getHeaderLayoutDefinition();

            return {

                data: data2,

                layout1: dataheader,

                headerLayout1: dataheader,

                customHeaderLayout: dataheader

            };

        }

        ,

        methods: {

            checkboxClicked: function (event) {

                this.headerLayout = event.target.checked ? this.customHeaderLayout : null;

            }

        }

    });



</script>


<style>

  .wj-flexgrid {

      height: 150px; 

      margin: 10px 0;

  }

  .extra-col {

      background: rgb(255,255,125);

  }


  .wj-multirow {

    height: 400px;

    margin: 6px 0;

    }

</style>

==========================================================================

코딩은 위와 같습니다.

버튼 클릭시 test1() 함수로 오는데요..
data 추가, 변경시 그리드도 동시에 변경처리 되야 할것 같은데 안되네요.

결론은 바인딩 된 데이터 추가/변경/삭제시 그리드에도 현재 세팅된 데이터로 보여주고 싶습니다.

확인 부탁드립니다.



  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

볶음이님의 댓글

볶음이 작성일

개인적으로는 grid init할때 grid 객체를 전역함수에 저장해두고 itemsource가 되는 data를 collectionView로 만들고 필요한 부분에서 추가/삭제/수정 등을 하고 데이터를 그리드에 반영하기 위해 this.grid.collectionView.refresh()를 써서 갱신해주니 반영되었어요.
그리드 refresh 찾아서 적용해보시는걸 추천드려요 ㅋㅋ

GCK루시님의 댓글의 댓글

GCK루시 작성일

볶음이님 안녕하세요 그레이프시티입니다.

고객님의 친절한 정보 공유 감사 드립니다.  :)

감사합니다.
그레이프시티 드림.

1 답변

VueJS Re: data 변경시 화면에 반영이 안되는 경우

페이지 정보

작성자 GCK루시 작성일 21-07-23 16:35 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의 주신 FlexGrid에 바인딩된 데이터를 변경 시 그리드에 변경 사항이 반영되도록 구현하기 위해서는 refresh 메서드를 사용하시면 됩니다. 더불어, Wijmo의 CollectionView 클래스를 이용하여 컨트롤에 바인딩할 시 UI 컨트롤에서 데이터를 쉽게 관리할 수 있는 기능을 제공합니다. 

FlexGrid의 데이터를 앞서 언급한 CollectionView 클래스 데이터로 바인딩 한 후, 데이터 변경 시, 해당 데이터 CollectionView의 sourceCollection 속성에서 접근하여 해당 속성에서 데이터를 변경 및 추가해주신 다음, 현재 뷰를 재생성하는 그리드의 collectionView에 refresh() 하시면 데이터 변경이 그리드에 반영된 것을 확인하실 수 있습니다. 자세한 코드는 아래 샘플에서 확인하시길 바랍니다.





추가적으로, CollectionView의 trackChanges를 true로 설정하는 경우, 그리드 데이터의 추가/삭제/편집과 같은 변경 사항을 별도 컬렉션에 업데이트하실 수 있습니다. 해당 기능은  아래 데모 사이트에서 확인 가능하오니 참고 부탁 드립니다. 


변경 내용 추적 : https://demo.grapecity.co.kr/wijmo/learn-wijmo/Core/CollectionView/EditingViews/TrackingChanges/vue 


다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.