在这里使用angularjs:
我正在创建一个包含 2 个静态列(ID 和评论)的表,其余列是通过单击按钮动态创建的。用户可以在此表的行中输入数据。我想从用户输入的表中读取/提取数据。
我在以下位置创建了一个 jsfiddle:http://jsfiddle.net/ajnh8bo5/7/
点击添加标签,给一个名字,然后点击添加列
读取 json 为:
$scope.read = function() {
return JSON.stringify($scope.targetTable);
};
目前我生成的 json 只提供有关添加的动态列的信息。请参阅下面的 json:
{
"id":0,
"name":"Table 1",
"columns":[
{
"id":0,
"label":"Column 0",
"$$hashKey":"object:11"
}
],
"rows":[
{
"0":"2",
"$$hashKey":"object:9",
"undefined":"1",
"id":1037
}]
上面的 json 是在我只添加一个动态列时生成的。在行数组“0”下:“2”表示第一个动态列的值为“2”。但它不显示为 ID & Comment 列输入的数据。我知道我在这里遗漏了一些东西,但不确定如何继续。
此刻不太重要的另一件事也是吐出列名的 json。
---更新---
添加所需的输出:
{
"columns": [
{
"id": 0,
"label": "ID"
},
{
"id": 1,
"label": "Column 1"
},
{
"id": 2,
"label": "Column 2"
},
{
"id": 4,
"label": "Comment"
}
],
"rows": [
{
"Id": "1",
"Column 1": "2",
"Column 2": "3",
"Comment": "user comment"
}
]
}
上面的 json 显示我有 2 个静态列 Id 和 Comment。 Column1 和 Column2 是动态的。
如果有人不能为我提供基于上述 JSON 的任何解决方案。谁能告诉我如何在我的 json 中输出静态列 ID 和评论。
--更新相关代码---
下面是 HTML 表格:
<table class="table table-bordered" ng-if="targetTable">
<thead>
<tr>
<th>ID #</th>
<th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
<th class="comment-fixed-width" ng-model="comment">Comment</th>
<td class="center add-column fixed-width"><a ng-href ng-click="addColumn()">+ Add Column</a></td>
<td class="comment-fixed-width" contenteditable="true" ></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td class="fixed-width" contenteditable="true" ng-model="r[column.id]"></td>
<td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
<td class="comment-fixed-width" contenteditable="true" ></td>
<td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
</tr>
</tbody>
</table>
AngularJs 代码:
function createTable() {
tableCounter++;
return {
id: currentTableId++,
name: `Table ${currentTableId}`,
columns: [],
rows: [{}],
uniqueIdCounter: 1037
}
在创建新选项卡时,我创建了一个表实例:
$scope.tables.push(createTable());
$scope.tables = [];
$scope.targetTable = null;
//When I click add dynamic column button I use the below code.
$scope.addColumn = function() {
if (tableCounter) {
var columns = $scope.targetTable.columns,
id = columns.length;
$scope.targetTable.columns.push({
id: columns.length,
label: `Column ${id}`
});
}
};
//Below code is for adding a new row
$scope.addNewRow = function(value, row) {
if (tableCounter) {
if (!value || value === "" || typeof value !== 'string') return;
$scope.targetTable.rows.push({});
row.id = $scope.targetTable.uniqueIdCounter++;
}
};
有人有意见吗?
最佳答案
我不想彻底修改你的代码,所以我只是对你的 HTML 代码做了一些小的调整:
JSFiddle:http://jsfiddle.net/0oerpd5u/
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td class="fixed-width" contenteditable="true" ng-model="r.id"></td>
<td class="fixed-width" contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!targetTable.rows[$index+1].id? addNewRow(r[column.id], r): ''"></td>
<td class="comment-fixed-width" contenteditable="true" ng-blur="!targetTable.rows[$index+1].id?addNewRow(r.comment, r):''" ng-model="r.comment">></td>
<td class="blank fixed-width" colspan="2" ng-model="r[column.id]"></td>
</tr>
</tbody>
在你的 JS 中:
var uniqueIdCounter =1037;
function createTable() {
tableCounter++;
return {
id: currentTableId++,
name: `Table ${currentTableId}`,
columns: [],
rows: [{id: uniqueIdCounter}],
uniqueIdCounter: uniqueIdCounter
}
}
$scope.addNewRow = function(value, row) {
if (tableCounter) {
if (!value || value === "" || typeof value !== 'string') return;
$scope.targetTable.rows.push({id :++$scope.targetTable.uniqueIdCounter});
}
};
关于javascript - AngularJS:从 HTML 表中读取 Json 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51329741/