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/ 添加更多功能
我想制作一个网页作为传播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/ 添加更多功能