Knockout JS: Creating dynamic table columns

问题:

Using Knockout JS:

I have a requirement as.

I have a table with 2 static columns where each has a text-box. I also have a add row button outside the table and one remove row button along each row.

When the user clicks add row it adds a row to the table and I can see two columns with textbox in each. User can add more rows if required by clicking add row and click remove row to remove rows.

This all has been setup and works fine as :

https://jsfiddle.net/aman1981/xmd1xobm/14/

My issue is there is also an Get Columns button. When the user clicks this button I fetch a list of columns and want to add these columns with headers b/w the already existing columns of the table.Each of these columns also need to have a textbox as well.

For ex I would the list of columns as:

 var columnsList = 'name, address, zip';

I am not sure how to add columns dynamically. Would appreciate inputs.

Here is the setup of my table:

<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>

<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="Get Columns" class="btn btn-primary" data-bind="click: addColumns" /> 
</div>

Anyone?

回答1:

Nice for you i have a dynamic table component from my previous project:

var observable = ko.observable;
var pureComputed = ko.pureComputed;
var observableArray = ko.observableArray;
var unwrap = ko.unwrap;

var data = observableArray([{
  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([{
    field: "a",
    displayName: "A"
},{
    field: "b",
    displayName: "B (i can even change the title)"
}])

function viewModel(params) {
    var paramColumns = params.columns;
    var paramData = params.data;
    var paramFieldKey = params.fieldKey || "field";
    var paramDisplayNameKey = params.displayNameKey || "displayName";

    var koColumnHeaders = pureComputed(function () {
        var columns = paramColumns();
        var columnHeaders = [];
        var fieldKey = unwrap(paramFieldKey);
        var displayNameKey = unwrap(paramDisplayNameKey);
        for (var i in columns) {
            var column = columns[i];
            columnHeaders.push({
                field: column[fieldKey],
                displayName: column[displayNameKey]
            })
        }
        return columnHeaders;
    })

    var koRows = pureComputed(function () {
        var data = paramData();
        var columns = paramColumns();
        var fieldKey = unwrap(paramFieldKey);
        var rows = [];
        for (var i in data) {
            var datum = data[i];
            var cells = []
            var row = {
                entity: data,
                cells: cells
            };
            for (var j in columns) {
                var column = columns[j];
                cells.push(datum[column[fieldKey]] || "");
            }
            rows.push(row);
        }
        return rows;
    });


    return {
        rows: koRows,
        columns: koColumnHeaders,
    }
}

ko.applyBindings(new viewModel({
    data: data,
    columns: columns
}))

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

    <table class="table table-bordered" border="1">
        <thead>
            <tr data-bind="foreach: columns">

                <th data-bind="text: displayName">
                </th>

            </tr>
        </thead>
        <tbody data-bind="foreach: rows">
            <tr>
                <!-- ko foreach: cells -->
                <td class="" data-bind="text: $data"></td>
                <!-- /ko -->
            </tr>
        </tbody>
    </table>

回答2:

I was able to resolve this using the post at: Knockout JS: Get Textbox data from Table under for-each binding

Here is my code:

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


})();

Here is the html part:

 <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>