Javascript Knockout JS：创建动态表列

使用敲除JS：

我有一个要求

我有一个表，有两个静态列，每个列都有一个文本框。我在表外还有一个AddRow按钮，每行有一个RemoveRow按钮

当用户单击AddRow时，它会向表中添加一行，我可以看到两列，每列中都有文本框。如果需要，用户可以添加更多行，方法是单击“添加行”，然后单击“删除行”以删除行

这一切都已设置好，工作正常，如下所示：

我的问题是还有一个获取列按钮。当用户单击此按钮时，我会获取一个列列表，并希望添加这些带有标题的列以及表中已有的列。这些列中的每一列还需要有一个文本框

例如，我希望列列表如下：

 var columnsList = 'name, address, zip';

我不知道如何动态添加列。我们将感谢您的投入

以下是我的表格的设置：

<table class="table table-bordered">
  <thead class="mbhead">
<tr class="mbrow">
  <th>SIID</th>
  <th>Comment</th>      
</tr>
  </thead>
  <tbody data-bind="foreach: data">
   <tr>
    <td>
     <input type="text" data-bind="text: SIID" class="form-control textbox" />
  </td>      
  <td> 
   <input type="text" data-bind="text: Comment" class="form-control textbox" />
  </td>  
   <td>
    <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
  </td>
</tr>
 </tbody>

SIID
评论

---

有人吗？

很高兴见到你我有一个来自上一个项目的动态表组件：

var-observable=ko.observable；
var pureComputed=ko.pureComputed；
var observableArray=ko.observableArray；
var unwrap=ko.unwrap；
var数据=可观测数据([{
a:123，
b:234，
c:345
},{
a:1231，
b:2341，
c:3451
},{
a:1232，
b:2342，
c:3425
},{
a:1233，
b:2343，
c:3453
}]);
var columns=observableArray([{
字段：“a”，
显示名称：“A”
},{
字段：“b”，
displayName：“B（我甚至可以更改标题）”
}])
函数视图模型（参数）{
var paramColumns=params.columns；
var paramData=params.data；
var paramFieldKey=params.fieldKey | |“field”；
var paramDisplayNameKey=params.displayNameKey | |“displayName”；
var koColumnHeaders=pureComputed（函数（）{
var columns=paramColumns（）；
var columnHeaders=[]；
var fieldKey=展开（paramFieldKey）；
var displayNameKey=展开（paramDisplayNameKey）；
for（列中的变量i）{
变量列=列[i]；
推({
字段：列[fieldKey]，
displayName:列[displayNameKey]
})
}
返回列标题；
})
var koRows=pureComputed（函数（）{
var data=paramData（）；
var columns=paramColumns（）；
var fieldKey=展开（paramFieldKey）；
var行=[]；
用于（数据中的var i）{
var数据=数据[i]；
变量单元格=[]
变量行={
实体：数据，
细胞：细胞
};
for（列中的变量j）{
var列=列[j]；
cells.push（基准[列[字段键]]| |“”）；
}
行。推（行）；
}
返回行；
});
返回{
行：科罗斯，
列：列标题，
}
}
ko.applyBindings（新视图模型）({
数据：数据，
列：列
}))

---

我通过以下帖子解决了这个问题：

这是我的密码：

 (function() {
var ViewModel = function() {
var self = this;
self.valuesData = ko.observableArray();

self.columns = ko.computed(function() {
  if (self.valuesData().length === 0)
    return [];

  return ValuesData.columns;
});


self.addRow = function() {
  self.valuesData.push(new ValuesData());
};

self.Save = function() {
  alert('Data:')
};

self.removeRow = function(data) {
  self.valuesData.remove(data);
};
}

// Dynamic values.
var ValuesData = function(siid, comment) {
var self = this;

// Add observables dynamically for all relevant columns.
for (var i = 0; i < ValuesData.columns.length; i++) {
  var column = ValuesData.columns[i];
  self[column.Property] = ko.observable(column.InitialValue)
 }
};

// Basic column definition.
ValuesData.columns = [{
  Caption: 'SIID',
  Property: 'SIID',
  InitialValue: undefined
},
{
  Caption: 'Column 1',
  Property: 'Col1',
  InitialValue: undefined
},
{
  Caption: 'Column 2',
  Property: 'Col2',
  InitialValue: 'banana'
},
{
  Caption: 'Comment',
  Property: 'Comment',
  InitialValue: undefined
}
]

vm = new ViewModel()
ko.applyBindings(vm);

// add initial row.
vm.addRow();


})();

（函数（）{
var ViewModel=函数（）{
var self=这个；
self.valuesData=ko.observatarray（）；
self.columns=ko.computed（函数（）{
if（self.valuesData（）.length==0）
返回[]；
返回值data.columns；
});
self.addRow=函数（）{
self.valuesData.push（新的valuesData（））；
};
self.Save=function（）{
警报（'数据：'）
};
self.removeow=函数（数据）{
自身值数据删除（数据）；
};
}
//动态值。
var ValuesData=函数（siid，注释）{
var self=这个；
//为所有相关列动态添加可观察项。
对于（变量i=0；i

以下是html部分：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-
 min.js"></script>
  <br><br>
<table>
 <thead>
 <!-- NEW: use ko foreach with 'as' to have an alias for accessing $data. -->
 <tr data-bind="foreach: { data: columns, as: 'column'}">
  <th> <span data-bind="text: column.Caption"></span>
  </th>
 </tr>
</thead>
  <tbody data-bind="foreach: { data: valuesData, as: 'rowData'}">
  <tr data-bind="foreach: { data: $parent.columns, as: 'column' }">
  <!-- NEW: bind to the corresponding property/observable in ValuesData -->
  <td><input type="text" class="form-control textbox" data-bind="textInput: 
 rowData[column.Property]" /> </td>
  </tr>
   <tr>
   <td>
    <input type="button" value="Remove Row" data-bind="click: 
 $parent.removeRow" class="btn btn-danger" />
    </td>
  </tr>
</tbody>

---

有趣的问题，首先你应该让你的html在AD中，tbody是动态的。使用

数据绑定=”html://your 来自vm的html“

在视图中，在添加行/列时，单击框显html并将其推送到视图中。@aman如果您能正常工作，请告诉我。我也在寻找这样的机会solution@supercool你有这样的例子吗？我试图把你的代码放在JSFIDLE中，但它不起作用。以下是JSFIDLE:。你能更新这个吗？嘿，伙计，这是一个敲除组件，你可以通过在htmlam中使用新的敲除组件来使用它，所以没有使用敲除组件。我们必须看看这是怎么回事。您是否有一个这样的工作示例，或者让我知道我需要对上面的JSFIDLE进行什么更新才能使其工作？您能否为我提供一个如何使其工作的示例。如果您能更新上面的JSFIDLE，将不胜感激。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-
 min.js"></script>
  <br><br>
<table>
 <thead>
 <!-- NEW: use ko foreach with 'as' to have an alias for accessing $data. -->
 <tr data-bind="foreach: { data: columns, as: 'column'}">
  <th> <span data-bind="text: column.Caption"></span>
  </th>
 </tr>
</thead>
  <tbody data-bind="foreach: { data: valuesData, as: 'rowData'}">
  <tr data-bind="foreach: { data: $parent.columns, as: 'column' }">
  <!-- NEW: bind to the corresponding property/observable in ValuesData -->
  <td><input type="text" class="form-control textbox" data-bind="textInput: 
 rowData[column.Property]" /> </td>
  </tr>
   <tr>
   <td>
    <input type="button" value="Remove Row" data-bind="click: 
 $parent.removeRow" class="btn btn-danger" />
    </td>
  </tr>
</tbody>