交互式Datagrid Ruby on Rails

时间:2012-12-21 13:45:21

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

我的问题

我想在我的RoR-app中使用交互式数据网格(如Excel / Numbers)。放入的数据应该更新db-table-record。

进行了一些研究并发现了很多用于导入和导出.xls(x)和.csv文件的Excel(/ 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,但也没有用。

我正在使用:
Ruby:1.9.3p194
Rails:3.2.8


有人能指出我正确的方向/帮帮我吗? 我已经尝试了几个小时而且无法让它发挥作用。

使用相同的handontable文件的普通index.html对我有用。

2 个答案:

答案 0 :(得分:3)

您能否指出哪些不起作用并提供错误消息?当我在我的测试应用程序中复制代码时,我收到错误Uncaught SyntaxError: Unexpected token ILLEGAL这是因为在你的脚本中有一些奇怪的符号。我手动重新键入此代码,一切正常。这是我的文件(jquery.handsontable.full.js我放置资产/ javascripts和jquery.handsontable.full.css我放在assets / stylesheets中): 的application.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>

答案 1 :(得分:0)

我一直在寻找类似的东西,并最终以backbone gem编写自己的东西。我在制作中使用它,但仅限于管理部分:它仍然是一个小测试...

只是说:如果您已经熟悉骨干并希望获得灵活性,那么这可能是一个良好的开端。不是你正在寻找的答案,而是另一种选择。