0

浏览我的第一个 SlickGrid 示例。我遇到了这个问题,其中显示列名的标题行将简单地运行通过表本身。

我附上了显示不当行为的屏幕截图。请注意列名出现的标题的长度。

在此处输入图像描述 我的代码如下。请帮忙。

<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> 
4

1 回答 1

0

将 div 容器的宽度设置为表格的确切宽度可以解决此问题。

<div id="container" style="width:480px;"></div>
于 2012-12-30T17:11:32.297 回答