滑板数据不可见

Question

我编写了一个slickgrid指令,但它似乎没有显示数据.

如果我检查chrome中的元素,那么我可以看到我的数据呈现的位置slick-viewport和grid-canvasdiv.

我确实试过resizeCanvas没有效果.

基本上网格行被重新连接但不可见.

我的模态看起来像这样

    <div id="TestModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 900px; margin-left: -450px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Results</h3>
            </div>
            <div class="modal-body">
             <myGrid
                           rows="results"  //results =  tow way bind to controller
                           columns="columns"  //columns =two way bind to controller
                           width="1100px"
                           height="200px"/>
            </div>
            <div class="modal-footer">
                <button ng-class="dialogButtonClass" data-dismiss="modal" aria-hidden="true">Select</button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>
   </div>

并且codel启动它看起来像这样 $('#TestModal').appendTo("body").modal('show');

然后我按照记录的方式渲染数据

即

var view= this.grid.getData();
           // To set the entire the data then use this
            view.beginUpdate();
            view.setItems(data, "id");
            view.collapseGroup(0);
            view.endUpdate();

任何帮助赞赏.

Answer 1

确保在检查顶层<div>(初始化的顶层new Slick.Grid())时,它具有设置的宽度和高度.还要确保myGrid.resizeCanvas()只有在显示模态并且所有CSS过渡完成后才调用:

$('#TestModal').on('shown', myGrid.resizeCanvas)