javascript - 如何使用 Rails 5.2 将 HTML 表格保存为 json 字段
问题描述
为了向 ValuesList 对象添加或多或少的结构化注释,我在 Postgres 表中添加了一个名为“anything”的 JSON 类型字段。我还向 ValuesListController 强参数添加了 :anything。
为了输入注释数据,我使用 JavaScript 创建了一个动态输入字段表。视图正确地发回输入数据,但我不知道如何处理它:
我收到一个哈希,但不知道如何为 JSON 字段格式化它。
这是 JavaScript 代码:
<div id="jsonTable-container">
<div id="jsonTable">
</div>
</div>
<script>
(function($) {
var jsonData = <%= raw this_object.anything.to_json %>;
// Get table header
if (!jsonData) {
var columns = ['Indice', 'Type', 'Title', 'Text'];
} else {
var columns = [];
for (var i = 0; i < jsonData.length; i++) {
for (var key in jsonData[i]) {
if (columns.indexOf(key) === -1) {
columns.push(key);
}
}
}
}
console.log(columns)
// Create the table
var table = $('<table/>', {class: 'table'});
// Create columns headers
var tr = $('<tr/>').appendTo(table);
for (var i = 0; i < columns.length; i++) {
var th = $('<th/>').appendTo(tr);
th.html(columns[i]);
}
// Add lines to the table if data available
if (jsonData) {
for (var i = 0; i < jsonData.length; i++) {
var tr = $('<tr/>').appendTo(table);
for (var j = 0; j < columns.length; j++) {
var td = $('<td/>').appendTo(tr);
var fieldIndex = ('anything').concat('[', (i).toString(), '][', columns[j],']');
$('<input>').attr({
name: fieldIndex,
id: fieldIndex,
type: 'text',
value: jsonData[i][columns[j]]
}).appendTo(td);
}
}
}
// Add the table to jsonTable-container
var tableContainer = $("#jsonTable");
tableContainer.html("");
tableContainer.append(table);
}(jQuery));
</script>
示例 JSON 数据:
[{"Indice": "1","Type": "ABBREV","Title": "ShortName","Text": "UNDEF"},{"Indice": "2","Type": "ALIAS","Title": "AliasName","Text": "UNKOWN"},{"Indice": "3","Type": "ALIAS","Title": "FemaleName","Text": "UNDEFINED"}]
生成以下 HTML 表格形式:
<table class="table">
<tbody>
<tr>
<th>Indice</th>
<th>Type</th>
<th>Title</th>
<th>Text</th>
</tr>
<tr>
<td><input name="anything[0][Indice]" id="anything[0][Indice]" type="text" value="1"></td>
<td><input name="anything[0][Type]" id="anything[0][Type]" type="text" value="ABBREV"></td>
<td><input name="anything[0][Title]" id="anything[0][Title]" type="text" value="ShortName"></td>
<td><input name="anything[0][Text]" id="anything[0][Text]" type="text" value="UNDEF"></td>
</tr>
Etc.
表单提交时收到的结果参数是:
params[:anything]
<ActionController::Parameters {"0"=>{"Indice"=>"1", "Type"=>"ABBREV", "Title"=>"ShortName", "Text"=>"UNDEF"}, "1"=>{"Indice"=>"2", "Type"=>"ALIAS", "Title"=>"AliasName", "Text"=>"UNKOWN"}, "2"=>{"Indice"=>"3", "Type"=>"ALIAS", "Title"=>"FemaleName", "Text"=>"UNDEFINED"}} permitted: false>
在目标字段中保存为:
{"0":{"Indice":"1","Type":"ABBREV","Title":"ShortName","Text":"UNDEF"},"1":{"Indice":"2","Type":"ALIAS","Title":"AliasName","Text":"UNKOWN"},"2":{"Indice":"3","Type":"ALIAS","Title":"FemaleName","Text":"UNDEFINED"}}
这比这篇文章的第一个版本要好得多。但是我怎样才能把它变成原始数据呢?
解决方案
const TimeTable=function(str) {
var results;
days=0;
const figureToControl=(h)=> {
var g='';
if ( !Number.isNaN(+h)===true) {
Number(h);
for(h > 0; h--; ) {
g+='<th></th>';
}
}
else {
g=`<th>${h}</th>`;
}
return g
}
const operate=(a, c)=> {
days++;
results=a.push(`<tr>${c.split(',').reduce((g, h)=>(g.push(figureToControl(h)), g), []).join('')}</tr>`)
return results
}
var tableText = '';
tableText+=str.split('/').reduce((a, c)=> (operate(a, c), a), []).join('');
return tableText+"</table>";
}
console.log(TimeTable("1,9F,6/8/10E,9D,2,9E,10E,2/2,9F,2,9S,2/8/10E,9D,9E,2,9S,2"));
我们开始吧让我解释一下如何输入字符串如果你使用/
它会扭曲它<tr>
所以1,9F,3/4
将是<tr><th></th><th>9F</th><th></th><th></th><th></th><tr><tr><th></th><th></th><th></th><th></th></tr>
如果你使用,
它会<th>
扭曲1,9F,3
它<th></th><th>9F</th><th></th><th></th><th></th>
现在数字意味着会有一个空的<th>
,所以3
将是<th></th><th></th><th></th>
这非常可靠,它返回一个字符串而不是一个 html 元素,你可以使用它来导入它
elment.innerHTMl = tablestring
,我它也适用于空格如果我没有写你想要的 json 字符串,请不要担心,但你总是可以更改我的代码
推荐阅读
- c++ - 如何一键从 QGraphicsScene 创建 png 图像
- ios - 如何快速列出我的 iPhone 设备中的所有 pdf 文件
- javascript - 我想使用 java 脚本获取客户端 IP 客户端连接到 LAN 或 WIFI
- javascript - Javascript 删除线
- java - 如何使用枚举序数 queryDSL 创建查询
- python - socket.send 和 socket.sendall() 的区别
- twitter-bootstrap - Vue少加载css“无法读取未定义的属性'分母'”
- c# - 如何使用 C# 将 CSV 文件转换为 Parquet
- html - 使用 Nginx 在 Linux 中的静态文件
- mysql - 在 Centos7 上启动时出现 MySQL 5.7 错误