javascript - 在 html/knockout js 中为表格中的每个不同项目创建部分

Question

我正在开发一个应用程序，在该应用程序中，我在一个 html 表中拥有不同的产品以及与之关联的一些其他数据，其中数据使用敲除 js 绑定。下面的代码不会按部分显示产品，但每个产品都会显示为不同的产品，尽管它们是相同的。

HTML

<table class="productTable" data-bind="visible: !loading()">

    <thead>

        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </thead>
    <tbody data-bind="foreach: canadiancrudes" >
        <tr >
            <td data-bind="text:Product"></td>
        </tr>
        <tr>
<td data-bind="text: Term"></td>
    <td data-bind="text: Location"></td>
    <td data-bind="text: Pipeline"></td>
    <td data-bind="text: BidCP"></td>
    <td data-bind="text: BidVolume"></td>
    <td data-bind="text: Index"></td>
    <td>
        <input type="text" id="txbReadBid"  data-bind="value: Bid" /></td>
    <td>
        <input type="text" id="txbReadOffer" data-bind="value: Offer" /></td>
    <td data-bind="text: OfferVolume"></td>
    <td data-bind="text: OfferCP"></td>
    <td></td>
    <td>
        <a href="#" title="Edit" data-bind="click: $root.edit">
            <img src= '@Url.Content("~/Images/edit.png")' /></a></td>

    <td><a href="#" title="Delete" data-bind="click: $root.remove">
        <img src= '@Url.Content("~/Images/delete.png")' /></a></td>
    <td>
        <a href="#" title="Copy" data-bind="click: $root.copy">
            <img src= '@Url.Content("~/Images/add.png")' /></a>
    </td>
</tr>

    </tbody>

    <tfoot>
        <tr>
            <th>Product</th>
            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>

    </tfoot>
</table>

从下面的屏幕截图中，您可以看到我有具有不同其他领域的类似产品，但它们没有被分段。现在我希望每个产品都有一个部分，比如 Product C5 在表中有四个条目，所以我希望它们都在一个部分中，每当我点击右侧的“+”图像时，它都会添加一行具有相同产品与该“+”图像相关联，我正在尝试将其添加到同一产品部分。

Answer 1

我想出了一个解决方案如下

索引.cshtml

<!--ko foreach: products-->
<h3 data-bind="text: $data"></h3>
<table class="productTable">

    <thead>

        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>

        </tr>

    </thead>

    <tbody data-bind="foreach: $root.subsetcanadiancrudes.index.Product()[$data]">

        <tr>
            <td data-bind="text: Term"></td>
            <td data-bind="text: Location"></td>
            <td data-bind="text: Pipeline"></td>
            <td data-bind="text: BidCP"></td>
            <td data-bind="text: BidVolume"></td>
            <td data-bind="text: Index"></td>

            <td data-bind="text: Bid"></td>
            <td data-bind="text: Offer"></td>
            <td data-bind="text: OfferVolume"></td>
            <td data-bind="text: OfferCP"></td>
        </tr>

    </tbody>


    <tfoot>
        <tr>

            <th>Term</th>
            <th>Location</th>
            <th>Pipeline</th>
            <th>Bid C/P</th>
            <th>Bid Volume</th>
            <th>Index</th>

            <th>Bid</th>
            <th>Offer</th>
            <th>Offer Volume</th>
            <th>Offer C/P</th>

        </tr>

    </tfoot>
</table>
<!--/ko-->

淘汰赛JS

ko.observableArray.fn.extendsdistinct = function (attrib) {var me = this;me.index = {};me.index[attrib] = ko.observable({});ko.computed(function () {var attribIndex = {};ko.utils.arrayForEach(me(), function (item) {var key = ko.utils.unwrapObservable(item[attrib]);if (key) {attribIndex[key] = attribIndex[key] || [];attribIndex[key].push(item);}});me.index[attrib](attribIndex);});return me;};
var CanadianCrudeViewModel = function (CanadianContext) {
    var self = this;
    self.canadiancrudes = ko.observableArray();
    self.products = ko.observableArray();
    self.datainput = ko.observableArray();
    self.loading = ko.observable(true);

self.subsetcanadiancrudes = ko.observableArray(self.datainput()).extendsdistinct('Product');
        self.products = ko.computed(function () {
        var products = ko.utils.arrayMap(self.subsetcanadiancrudes(), function (item) {
            return item.Product;
            })
        return ko.utils.arrayGetDistinctValues(products).sort();
        });
 viewModel.canadiancrudes.push(obsCanadianCrude);
        viewModel.subsetcanadiancrudes.push(obsCanadianCrude);
        viewModel.canadiancrudes.sort(function (left, right) { return left.Product() === right.Product() ? 0 : (left.Product() < right.Product() ? -1 : 1) });