交互式 Datagrid Ruby on Rails答案

【问题标题】：Interactive Datagrid Ruby on Rails交互式 Datagrid Ruby on Rails
【发布时间】：2012-12-09 02:26:32
【问题描述】：

我的问题

我想在我的 RoR 应用程序中创建一个交互式数据网格（如 Excel/Numbers）。放入的数据应该更新一个 db-table-record。

做了一些研究，发现很多 Excel(/CSV) 处理器用于导入和导出 .xls(x) 和 .csv 文件。终于找到了一个基于JS、JQuery和html的数据网格视图。 Here。这正是我所需要的。唯一的问题是，我无法让它在 RoR 中工作。

我尝试了什么：

Application.html.erb
我使用“Safari Inspector”检查了文件路径

<script src="assets/lib/jquery.min.js"></script>
<script src="assets/dist/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="assets/dist/jquery.handsontable.full.css">

查看

%div#exampleGrid

%script
  var myData = [
  ["", "Kia", "Nissan", "Toyota", "Honda"],
  ["2008", 10, 11, 12, 13],
  ["2009", 20, 11, 14, 13],
  ["2010", 30, 15, 12, 13]
  ];

  $("#exampleGrid").handsontable({
  data: myData,
  startRows: 5,
  startCols: 5,
  minSpareCols: 1,
  //always keep at least 1 spare row at the right
  minSpareRows: 1,
  //always keep at least 1 spare row at the bottom,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
  });

我也在 Application.js 中尝试了 JS，但也没有用。

我正在使用：
红宝石：1.9.3p194
导轨：3.2.8

有人能指出我正确的方向/帮助我吗？
我已经尝试了几个小时，但无法让它工作。

具有相同实用文件的普通 index.html 确实对我有用。

【问题讨论】：

标签： ruby-on-rails-3 datagrid handsontable

【解决方案1】：

您能否具体说明什么不起作用并提供错误消息？当我在我的测试应用程序中复制您的代码时，我收到错误Uncaught SyntaxError: Unexpected token ILLEGAL 这是因为您的脚本中有一些奇怪的符号。我手动重新输入此代码，一切正常。这是我的文件（我放置的 jquery.handsontable.full.js 是 assets/javascripts 和 jquery.handsontable.full.css 我放置在 assets/stylesheets 中）：应用程序.js：

//= require jquery
//= require jquery_ujs
//= require jquery.handsontable.full

application.css：

*= require_self
*= require jquery.handsontable.full

在 index.html.erb 中：

<div id="exampleGrid"></div>
<script type="text/javascript">
var myData = [
   ["", "Kia", "Nissan", "Toyota", "Honda"],
   ["2008", 10, 11, 12, 13],
   ["2009", 20, 11, 14, 13],
   ["2010", 30, 15, 12, 13]
   ];

   $("#exampleGrid").handsontable({
   data: myData,
   startRows: 5,
   startCols: 5,
   minSpareCols: 1,
   //always keep at least 1 spare row at the right
   minSpareRows: 1,
   //always keep at least 1 spare row at the bottom,
   rowHeaders: true,
   colHeaders: true,
   contextMenu: true
   });
  </script>

【讨论】：

谢谢你的回答，重点是，没有错误信息。它只是没有出现。 %div#exampleGrid 保持不变，没有添加网格。我在 application.js 和 application.css 中添加了这些行，但这些也没有帮助。
这个答案对我来说非常完美。如果可以的话，我会 +10 ^^ 谢谢

【解决方案2】：

我一直在寻找类似的东西，最后写了自己的，作为backbone gem。我在生产中使用它，但只在管理部分使用：它仍然是一个小测试版......

只是说：如果您已经熟悉骨干网并且想要灵活性，那么这可能是一个好的开始。不是您正在寻找的答案，而是另一种选择。

【讨论】：