浏览我的第一个 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>