Блог

У меня есть требование, при котором мне нужно добавить строку в таблицу со значениями по умолчанию из первой строки, нажав кнопку «добавить строку». Существующая строка должна быть доступна только для чтения, а новая строка должна быть доступна для редактирования.

Мой HTML-код:

 <table>
    <tbody data-bind="foreach: TPItems()">
        <tr>
            <td></td>
            <td><span data-bind="text: beginrange"> </span></td>
            <td><span data-bind="text: endrange"></span></td>
            <td></td>
            <td></td>
            <td><span data-bind="text: lstpricetomu"></span></td>
            <td></td>
            <td><span data-bind=
            "text: offmulptomutp"></span></td>
            <td><span data-bind="text: mltusrtargprice"></span></td>
            <td><button data-bind="click: $root.removePCAttribute">
                Delete Row</button></td>
        </tr>
    </tbody>
</table>

<table>
    <tr>
        <td><button data-bind="click: $root.addPCAttribute">Add
        Row</button></td>
    </tr>
</table>
  

Моя модель представления:

 function PriceCatalogTieredPricingViewModel() {

    var self = this;
    //self.thetest=ko.observable(false);

    self.defaultTPvalues = {
        itemnum: ko.observable("1127"),
        beginrange: ko.observable(""),
        endrange: ko.observable(""),
        multiuserflrprice: ko.observable(" $12.50 "),
        lstprice: ko.observable(" $999.95 "),
        lstpricetomu: ko.observable("0%"),
        mltiusrlstprice: ko.observable(" $999.95 "),
        offmulptomutp: ko.observable("50%"),
        mltusrtargprice: ko.observable(" $499.98 ")
    };

    self.TPItems = ko.observableArray(
    [
    new PCTieredPricingClass({
        itemnum: ko.observable("1127"),
        beginrange: ko.observable("1"),
        endrange: ko.observable("1"),
        multiuserflrprice: ko.observable(" $12.50 "),
        lstprice: ko.observable(" $999.95 "),
        lstpricetomu: ko.observable("0%"),
        mltiusrlstprice: ko.observable(" $999.95 "),
        offmulptomutp: ko.observable("50%"),
        mltusrtargprice: ko.observable(" $499.98 "),
        thetest: ko.observable(false)
    })]);

    self.addPCAttribute = function () {
        self.TPItems.push(new PCTieredPricingClass(self.defaultTPvalues));
    }
}

ko.applyBindings(new PriceCatalogTieredPricingViewModel());
});
  

Вы можете добавить дополнительное поле IsEditable следующим образом

 self.defaultTPvalues = {
    itemnum: ko.observable("1127"),
    beginrange: ko.observable(""),
    endrange: ko.observable(""),
    multiuserflrprice: ko.observable(" $12.50 "),
    lstprice: ko.observable(" $999.95 "),
    lstpricetomu: ko.observable("0%"),
    mltiusrlstprice: ko.observable(" $999.95 "),
    offmulptomutp: ko.observable("50%"),
    mltusrtargprice: ko.observable(" $499.98 "),
    isEditble  : ko.observable(false)
};
  

И это будет отличать ваши недавно добавленные строки

 self.addPCAttribute = function () {
    self.defaultTPvalues.isEditble(true)
    self.TPItems.push(new PCTieredPricingClass(self.defaultTPvalues));
}
  

ПРАВКИ

Я предполагаю, что вы будете редактировать или удалять только поле, которое доступно для редактирования, и ничего не будете делать со строками по умолчанию. Вот условная проверка

 <tbody data-bind="foreach: TPItems()">
    <tr>
        <td></td>
        <td><span data-bind="text: beginrange"> </span></td>
        <td><span data-bind="text: endrange"></span></td>
        <td></td>
        <td></td>
        <td><span data-bind="text: lstpricetomu"></span></td>
        <td></td>
        <td><span data-bind=
        "text: offmulptomutp"></span></td>
        <td><span data-bind="text: mltusrtargprice"></span></td>
        <!-- ko if:isEditable -->
        <td><button data-bind="click: $root.removePCAttribute">Delete Row</button></td>
        <!-- /ko -->
        <!-- ko ifnot:isEditable -->
        <td></td>
        <!-- /ko -->            
    </tr>
</tbody>