rails 有什么方法可以将网页制作成电子表格吗?

Is there any way to make a webpage as a spreadsheet in rails

我想制作一个网页作为传播sheet,我可以在其中添加更多单元格,例如具有与 excelsheet 相同的功能,还可以保存我的文件到数据库。 我使用了 'spreadsheet'、'axlsx' gems,但它们都导出 excel 文件而不是制作网页。

我在 jqgrid 插件的帮助下使用 'jqgrid-jquery-rails' 成功集成了它。并准确地实现电子表格等功能。

在 gem 文件中添加 gem 'jqgrid-jquery-rails', '~> 4.6.001'。

还需要 gem "jquery-ui-rails"。

对于演示,

您可以将具有迁移字段的发票脚手架添加为

class 创建发票 < ActiveRecord::Migration 定义更改

create_table :invoices do |t|
  t.integer   'invid'
  t.datetime  'invdate'
  t.float     'amount'
  t.float     'tax'
  t.float     'total'
  t.string    'note'
end

结束

然后在发票的索引页中,编写此代码以进行演示。

<br /><br />

<input type="button" value="Edit in Batch Mode" onclick="startEdit()" />
<input type="button" value="Save All Rows" onclick="saveRows()" />

<br /><br />

<table id="jqGrid"></table>
<div id="jqGridPager"></div>

<script type="text/javascript">

    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            url: "/invoices",
            editurl: ' /invoices/update_all_row',
            datatype: "json",
            colModel: [
                {
                    label: "Inv No.",
                    name: "id",
                    width: 75
                },
                {
                    label: "Date",
                    name: 'invdate',
                    width: 140,
                    editable: true // must set editable to true if you want to make the field editable
                },
                {
                    label: "Amount",
                    name: 'amount',
                    width: 100,
                    editable: true
                },
                {
                    label : "Tax",
                    name: 'tax',
                    width: 120,
                    editable: true
                }
            ],
            sortname: 'Inv No',
            loadonce : true,
            viewrecords: true,
            onSelectRow: startEdit, // the javascript function to call on row click. will ues to to put the row in edit mode
            width: 780,
            height: 200,
            rowNum: 10,
            pager: "#jqGridPager",
            gridview: true
        });


        var lastSelection;

        function editRow(id) {
            if (id && id !== lastSelection) {
                var grid = $("#jqGrid");
                grid.jqGrid('restoreRow', lastSelection);
                grid.jqGrid('editRow',id, {keys: true} );
                lastSelection = id;
            }
        }
    });


        function startEdit() {
            var grid = $("#jqGrid");
            var ids = grid.jqGrid('getDataIDs');

            for (var i = 0; i < ids.length; i++) {
                grid.jqGrid('editRow',ids[i]);
            }
        };
        function saveRows() {
          var grid = $("#jqGrid");
          var ids = grid.jqGrid('getDataIDs');

          for (var i = 0; i < ids.length; i++) {
            grid.jqGrid('saveRow', ids[i]);
          }
       }

</script>

您可以在网页上看到类似网格的电子表格。具有许多与电子表格相同的功能。

可以从 http://www.guriddo.net/demo/guriddojs/ 添加更多功能