Question

我想创建一个充当电子表格的网页，我可以在其中添加更多单元格，例如具有与excelsheet相同的功能，还可以将我的文件保存到数据库中。我使用了'电子表格'，'axlsx'宝石，但它们都导出了excel文件，而不是制作它的网页。

Answer 1

添加宝石'jqgrid-jquery-rails'，'〜＆gt;宝石文件中的4.6.001'。

还需要宝石“jquery-ui-rails”。

对于演示，

您可以添加具有迁移字段的发票支架

类CreateInvoices＆lt; ActiveRecord的::迁移改变

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/

添加更多功能

Answer 2

我已成功使用＆＃39; jqgrid-jquery-rails＆＃39;在jqgrid插件的帮助下。并准确地使电子表格行为的功能。

有没有办法在rails中将网页制作为电子表格

2 个答案: