1
我想用一個簡單的可編輯表格來使用SlickGrid，使用example1_simple（在這裏找到http://mleibman.github.com/SlickGrid/examples/example1-simple.html）作爲模板，但它的錯誤已經消失了。javascript slickgrid列寬
我的網格必須適合280像素寬的窗體中的選項卡，並且將有3列（id，X，Y）。 id會自動增加，並且x會變爲空白，但爲了測試，我在每個單元格中放一個逐漸加長的字符串，所以在第一行它應該讀爲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創建了一個表格，但他們將表格用於其他目的，並且不相關。
請幫忙。
感謝，
馬克·佩爾蒂埃