Question

我想动态地将包含复选框的列添加到表中。目前的小提琴 http://jsfiddle.net/sfortner/N5tQT/5/，主要基于Ryan Niemeyer的例子 http://jsfiddle.net/sfortner/USjuY/82/。在该示例中，单击“添加教师”会为所选教师添加新行，而单击“添加助手”会添加包含所选助手的列。

当我添加助手时，它会重用activeColumn observable数组来确定是否添加可读或可写的文本输入，但是我希望能够添加带有复选框的第三种类型的列，类似于Checkbox1列，用户可以根据需要将助理与教师关联。复选框列将包含以下内容：

<td><input class="center" style="height:18px;"type="checkbox" value="0" /></td>

任何想法都将不胜感激。我想过可能会添加一个像当前activeColumns这样的新的activeAssts可观察数组，但它会丢失总列数。我还想到了activeColumns observable数组的上述附加参数，这可能有用，但不知道如何只添加复选框列。 TIA，Steve

Answer 1

当你想显示复选框列时，我会使用一个设置为true的observable。然后，您可以使用可见绑定仅在observable为true时显示复选框行。

var ViewModel = function (model) {
    var self = this;

    self.rows = $.map(model.rows, function (row) { return new RowData(row); } );
    self.showCheckboxes = ko.observable(false);

    self.showCheckboxesClick = function () {
        self.showCheckboxes(true);
    };
};

var RowData = function (row) {
    var self = this;

    ko.utils.extend(self, row);    

    self.isChecked = ko.observable();
};

<button data-bind="click: showCheckboxesClick">Show checkboxes</button>
<table>
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th data-bind="visible: showCheckboxes"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: rows">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
            <td data-bind="visible: $parent.showCheckboxes"><input type="checkbox" data-bind="checked: isChecked"/></td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/YSvu3/

Knockoutjs动态地将复选框列添加到表中

1 个答案: