我正在尝试使用 example1_simple(在此处找到 http://mleibman.github.com/SlickGrid/examples/example1-simple.html)作为模板，使用 SlickGrid 实现一个简单的可编辑表格，但它出现了严重错误。
我的网格必须适合窗体上 280 像素宽且有 3 列(id、X、Y)的选项卡。 id 将自动递增，x 和 y 将为空白，但为了测试，我在每个单元格中放置了一个逐渐加长的字符串，因此在第一行应该读取 0、a、b，第二行将包含 1、aa、bb等。然而，每个单元格都绘制在前一个单元格的下方，因此第 1 行包含“0”，第 2 行包含“1”和“a”，它们相互重叠绘制，第 3 行包含“2”、“aa”和'b' 等等。我暂时放在我的网站上http://www.nutanageophysics.com/IFP/test.html所以每个人都可以看到。 (快速附带的问题 - 保存此类实例的最佳方法是什么？)
这是我的测试 html 文件
<!DOCTYPE html>
<html>
<head>
<title>Nutana Project Planner</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css"/>
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.event.drag-2.0.min.js"></script>
<script src="js/slick.core.js"></script>
<script src="js/slick.grid.js"></script>
<script src="js/xyGrid.js"></script>
<script type="text/javascript">
var xyGrid;
function initialize() {
xyGrid = new Slick.Grid("#xyGrid", data, columns, options);
}
</script>
</head>
<body onload="initialize();">
<div id=xyGrid >
<!-- the grid is going to be placed here by onLoadXML -->
</div>
</body>
</html>
我的 SlickGrid 代码在 xyGrid.js 中，包含在这里:
var data = [];
var columns = [
{id: "id", name: "id", field: "id"},
{id: "x1", name: "X", field: "x1"},
{id: "y1", name: "Y", field: "y1"},
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
};
$(function () {
var a='a';
var b='b';
for (var i = 0; i < 10; i++) {
data[i] = {
id: i,
x1: a,
y1: b,
};
a +="a";
b += "b";
}
})
唯一可能相关的事情是我在 css 中为 xyGrid 定义了样式
#xyGrid {
width: 280px;
height: 500px;
}
我试过更改宽度但没有效果。所有其他相关的 css 都在我没有触及的 jquery.ui.css 中。我也尝试了很多不同的 Grid 选项，但都没有成功，但这里使用的两个是示例中使用的那些。我还在示例中围绕我的 div 构建了一个表格，但他们将该表格用于其他目的并且它不相关。
请帮忙。
谢谢，
马克·佩尔蒂埃
最佳答案
我相信您缺少样式表: http://mleibman.github.com/SlickGrid/slick.grid.css
我在本地重新创建了它，看起来还不错。仔细检查原始示例中包含的所有工作表和脚本。
(您可以使用 jsfiddle.net 作为一些示例代码。不确定它是否可以容纳所有这些!)
关于javascript SlickGrid 列宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10217949/