javascript - javascript SlickGrid列宽

我正在尝试使用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 - javascript SlickGrid列宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10217949/

slickgrid

javascript - javascript SlickGrid列宽