Question

浏览我的第一个SlickGrid示例。我遇到这个问题，其中显示列名称的标题行将简单地运行方式传递表本身。

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

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>

Answer 1

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

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

SickGrid Runaway列名称行

1 个答案: