Question

在这里使用knockout js：

继续Knockout JS: Creating dynamic table columns

的帖子

我设法以某种方式在knockout中创建动态列。因此，当用户单击添加行时，它会向表中添加一行。我目前所困扰的是如何使用我表格中的文本框中输入的数据来获取数据。比如说我有4列，添加一行会在表格中创建4个文本框。当用户在那些文本框中输入数据时，我想循环并获取输入并保存的所有数据。

这是我设法创建的jsfiddle。 https://jsfiddle.net/aman1981/L3pjhk0z/6/

我的valuesData在这里总是空的：

"valuesData": [
{}

我需要做些什么更新才能获取所有数据。可以是json形式

{
  "col1": "1", 
  "col2": "2"
   ....and so on depending on the columns
}

如果您需要更多信息，请告诉我

Answer 1

您的输入字段未映射到您的值数据。

我的代码在您的某些方面有所不同。为确保self.columnNames列的列数不超过ValuesData，我创建了一个包含所有相关列定义的静态对象ValuesData.columns。单击addRow后，动态创建单列的可观察量。

＆＃13;

(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();


})();

＆＃13;

<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>
</table>

<br><br>
<div class="col-xs-12 col-sm-6">
  <input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />
  <input type="button" value="Save" class="btn btn-primary" data-bind="click: Save" />
</div>
<pre data-bind="text: ko.toJSON(valuesData, null, 2)"></pre>

＆＃13;

Knockout JS：从每个绑定下的表中获取文本框数据

1 个答案: