thomasJang / axisj

javascript UI library
http://axisj.com/
GNU Lesser General Public License v2.1
310 stars 86 forks source link

AXGrid 데이터 추가시 이슈 #807

Closed nayasis closed 8 years ago

nayasis commented 8 years ago

안녕하세요. 우선 훌륭한 오픈소스 만들어주셔서 감사인사부터 드립니다. ^-^

다름이 아니라, 데이터를 그리드에 append 시킬 때 다음과 같은 이슈가 있어서 이에 대해 문의를 드리고자 합니다.

  1. 데이터가 비어있는 상태에서 append (fetchList) 가 가능할런지요 ? (현재는 작동을 하지 않아서요.)
  2. 데이터가 추가될 때, 그리드 내부가 꽉 차보이지 않습니다. 브라우저 크기를 바꿔주면 resize 가 되긴 합니다만...

image

\ 처음에는 "#gridTest_AX_tbody" 의 tr이 10개 뿐인데, 브라우저 크기를 조정하면 그 이후에는 tr이 20개로 늘어나네요. fetchList 한 다음 reloadList 등을 불러주면 혹시 변경될까 했는데... 잘 안되네요. ㅡ_ㅜ

관련 소스는 다음과 같습니다.

var grid = new AXGrid();

$(document).ready(function() {

  grid.setConfig({
    targetID : "gridTest",
    theme : "AXGrid",
    //autoChangeGridView: { // autoChangeGridView by browser width
    //  mobile:[0,600], grid:[600]
    //},
    colGroup : [
      {key:"no",     label:"No.",    width:"40", align:"center", formatter:"money"},
      {key:"title",  label:"Title",  width:"200" },
      {key:"writer", label:"Writer", width:"100", align:"center"},
      {key:"date",   label:"Date.",  width:"100", align:"center"},
      {key:"desc",   label:"Etc.",   width:"*"}
    ],
    body : {
      onclick: function(){
        toast.push(Object.toJSON({index:this.index, item:this.item}));
      }
    },
    page:{
      paging:false
    }
  });

  //setList
  grid.setList(gridData);
  // grid.setList([]); 또는 아무런 초기화 없이 fetchList 가 실행되면 데이터가 추가되지 않아보입니다.

  grid.fetchList( gridData );
  grid.fetchList( gridData );
  grid.fetchList( gridData );

});

var gridData = [
  { no: 1, title:"AXGrid  1 줄 입니다.", writer:"정화수", img:"img/1.jpg", desc:"많은 글을 담고 있는 내용 입니다. 자연스럽게 줄이 넘어가고 표현되는 것이 관건 입니다.", category:"액시스제이", date:"2014-04-05" },
  { no: 2, title:"AXGrid  2 줄 입니다.", writer:"양해엽", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07" },
  { no: 3, title:"AXGrid  3 줄 입니다.", writer:"양해엽", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07" },
  { no: 4, title:"AXGrid  4 줄 입니다.", writer:"양해엽", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07" },
  { no: 5, title:"AXGrid  5 줄 입니다.", writer:"양해엽", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07" },
  { no: 6, title:"AXGrid  6 줄 입니다.", writer:"양해엽", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07" },
  { no: 7, title:"AXGrid  7 줄 입니다.", writer:"양해엽", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07" },
  { no: 8, title:"AXGrid  8 줄 입니다.", writer:"양해엽", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07" },
  { no: 9, title:"AXGrid  9 줄 입니다.", writer:"양해엽", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07" },
  { no:10, title:"AXGrid 10 줄 입니다.", writer:"양해엽", img:"img/2.jpg", desc:"많은 글을 담고 있는 내용 입니다.", category:"액시스제이", date:"2014-04-07" },
];
nayasis commented 8 years ago

자답입니다. ^-^

아래와 같이 redrawGrid 함수를 호출해주니 문제없이 잘 작동하네요. ^-^

grid.redrawGrid();