SickGrid失控列名稱行

查看我的第一個SlickGrid示例。我遇到這個問題，其中顯示列名稱的標題行將簡單地通過表格本身。SickGrid失控列名稱行

我附上了一個顯示錯誤行爲的截圖。請注意列名出現的標題的長度。

enter image description here 我的代碼如下。請幫忙。

<html> 
<head> 
     <link rel="stylesheet" href="./slick/slick.grid.css" type="text/css"/> 
     <link rel="stylesheet" href="./slick/examples/examples.css" type="text/css"/> 

    <script src="./slick/lib/jquery-1.7.min.js"></script> 
    <script src="./slick/lib/jquery-ui-1.8.16.custom.min.js"></script> 
    <script src="./slick/lib/jquery.event.drag-2.0.min.js"></script> 

    <script src="./slick/slick.editors.js"></script> 
    <script src="./slick/slick.core.js"></script> 
    <script src="./slick/slick.grid.js"></script> 
</head> 

<body> 
<div id="container"></div> 

<script> 

    var grid, 
     data = [], 
     columns = [ 
     { id: "col1", name: "Col1", field: "col1"}, 
     { id: "col2", name: "Col2", field: "col2" }, 
     { id: "col3", name: "Col3", field: "col3" }, 
     { id: "col4", name: "Col4", field: "col4" }, 
     { id: "col5", name: "Col5", field: "col5" }, 
     { id: "col6", name: "Col6", field: "col6" } 
     ], 
     options = { 
     editable: false, 
     enableAddRow: true, 
     enableCellNavigation: false, 
     autoHeight: true 
     }; 
    for (var i = 5; i-- > 0;) { 
     data[i] = { 
      col1: "", 
      col2: "", 
      col3: "", 
      col4: "", 
     col5: "", 
     col6: "" 
    }; 
    } 
    grid = new Slick.Grid("#container", data, columns, options); 
</script> 

</body> 
</html>

來源

2012-12-29 Klaus

將div容器的寬度設置爲表格的確切寬度可以解決問題。

<div id="container" style="width:480px;"></div>

來源

2012-12-30 17:11:32 Klaus

SickGrid失控列名稱行

回答

相關問題