1

我正在尝试使用 SlickGrid 使用 example1_simple （在此处找到http://mleibman.github.com/SlickGrid/examples/example1-simple.html）作为模板来实现一个简单的可编辑表，但它出现了严重错误。

我的网格必须适合表单上的一个选项卡，该选项卡宽 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 周围建立了一个表格，但他们将该表格用于其他目的，并且不相关。

请帮忙。

谢谢，

马克·佩尔蒂埃

4

1 回答 1

3

我相信你错过了样式表：http: //mleibman.github.com/SlickGrid/slick.grid.css

我在本地重新创建了它，它看起来还不错。仔细检查您是否拥有原始示例中包含的所有工作表和脚本。

（您可以使用jsfiddle.net获取一些示例代码。不确定它是否可以容纳所有这些！）

于 2012-04-18T22:25:33.503 回答