jquery - slickgrid 数据不可见

Question

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

如果我在 Chrome 中检查元素，那么我可以看到 slick-viewport 和 grid-canvas div，其中呈现我的数据。

我确实尝试了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)