2011-07-18 66 views
1

我想使用slickgrid来渲染一个非常简单的表,结果是意外的。下面是代码:slickgrid:简单的网格渲染错误

<script> 

    var grid; 

    var columns = [ 
     {id:"id", name:"ID", field:"id"}, 
     {id:"a", name:"A", field:"a"}, 
     {id:"b", name:"B", field:"b"} 
    ]; 

    var options = { 
     enableCellNavigation: false, 
     enableColumnReorder: false 
    }; 

    $(function() { 
      var data = []; 
      data[0] = { 
       id: "1", 
       a: "1", 
       b: "1" }; 
      data[1] = { 
       id: "2", 
       a: "2", 
       b: "2" }; 

       grid = new Slick.Grid("#myGrid", data, columns, options); 
       $("#myGrid").show(); 

     }); 

    </script> 

而不是显示:

| ID | A | B | 
| 1 | 1 | 1 | 
| 2 | 2 | 2 | 

| ID | A | B | 
| 1 | 1 | 
| 2 | 2 | 
| 2 | 

有人能告诉我这是怎么发生的呢?

谢谢

+0

似乎你在html或css设计中存在冲突。我有一个类似的问题,我修复了#myGrid div。请尝试设置样式:宽度比您认为需要更大。 –

回答

0

复制你的代码和网格正确显示给我。也许你应该检查你的jQuery和SlickGrid版本?

这是我使用的HTML。

<table width="100%"> 
    <tr> 
     <td valign="top" width="50%"> 
     <div id="myGrid" style="width: 600px; height: 500px;"> 
     </div> 
     </td> 
     <td valign="top"> 
     <h2> 
      Demonstrates:</h2> 
     <ul> 
      <li>SlickGrid</li> 
     </ul> 
     </td> 
    </tr> 
    </table>