2014-09-08 13 views
1

간단한 SlickGrid를 사용하는 데 문제가 있습니다. 데이터 행을 표시 할 수는 없지만 공간을 만듭니다.SlickGrid 행이 표시되지 않습니다.

var defaultFormatter = function (row, cell, value, columnDef, dataContext) { 
     return value; 
    } 
var subgrid = $("#subgrid"); 
    var dt = new Slick.Data.DataView(); 
    var its = [ 
     { Id: "1", name: "First row", time: "15:13" } 
    ]; 
    dt.setItems(its, "Id"); 
    var opts = { 
     enableCellNavigation: true, 
     enableColumnReorder: false 
    }; 
var columns = [ 
     { 
      width: 0, 
      name: "Row name", 
      field: "name", 
      id: "name" 
     }, 
     { 
      width: 0, 
      name: "Time", 
      field: "time", 
      id: "time" 
     } 
    ]; 
    for (var i in columns) { 
     if (columns[i].width == 0) 
      columns[i].width = "auto"; 
     columns[i].formatter = defaultFormatter; 
    } 


    var ogrid = new Slick.Grid("#subgrid", dt, columns, opts); 
    ogrid.invalidate(); 
    ogrid.render(); 

HTML 코드는 간단하다 : 여기 내 코드입니다

<div id="subgrid" class="grid-place-holder"></div> 

그래서, 페이지가 로딩 될 때마다, SlickGrid는 헤더 행과 그리드 캔버스를 빌드는 있지만 데이터가 없습니다 .grid-canvas. 예를 들어 "ogrid.invalidateAllRows()"와 같은 다른 조합을 시도했지만 아무 것도 작동하지 않습니다. 제발, 나 한테 단서를 줘, 어디서 잘못 됐니?

업데이트 : 알겠습니다. 알겠습니다. SlickGrid가 동적으로 렌더링되고 "#subgrid"높이를 설정하지 않았습니다. 따라서 "height : auto"(slickgrid의 경우 높이 = 0)의 경우 행을 렌더링 할 수 없습니다. 항상 slickgrid 루트 요소에서 높이 스타일을 설정하십시오.

+1

해결책을 찾은 경우 질문에 대한 답변으로 추가하십시오. –

답변

2

SlickGrid가 동적으로 렌더링되고 "#subgrid"높이를 설정하지 않았습니다. 따라서 "height : auto"(slickgrid의 경우 높이 = 0)의 경우 행을 렌더링 할 수 없습니다. 항상 slickgrid 루트 요소에서 높이 스타일을 설정하십시오.