Question

我有一个要求，我需要通过单击“添加行”按钮将行添加到具有第一行默认值的表中。现有行应该是只读的，新行应该是可编辑的。

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

Answer 1

您可以像这样添加额外的字段isEditble

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

EDITS

我假设您只会编辑或删除可编辑的字段，并且不会对默认行执行任何操作。这是条件检查

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

如何使表中的现有行只读和新添加的行可编辑

1 个答案: