javascript - 将最后的td带到tr基因 knockout 的下一行

我想将最后一列“说明”带到下一行

这是小提琴http://jsfiddle.net/pratbhoir/fNhKp/12/

一定看起来像
我需要表，说明td必须在同一tr中。

Item name         SalesCount   Price
Speedy Coyote     89           $190.00
This is a Description
Furious Lizard    152          $25.00
This is a Description

预先感谢您的帮助

最佳答案

您应该具有以下内容：（我已经更新了您的jsfiddle）

或者，您可以在模板中使用div代替table，但是我不确定，因为我不太了解ko.simpleGrid ...

的HTML

<div class='liveExample'>
    <div data-bind='simpleGrid: gridViewModel, simpleGridTemplate:"custom_grid_template"'> </div>
</div>

<script type="text/javascript" id="custom_grid_template">
  <table class="ko-grid" cellspacing="0">
    <thead>
      <tr data-bind="foreach: columns">
        <th data-bind="text: headerText"></th>
      </tr>
    </thead>
    <tbody data-bind="foreach: itemsOnCurrentPage">
      <tr data-bind="foreach: $parent.columns">

        <!--ko ifnot: typeof rowText == 'object' && typeof rowText.action == 'function'-->
        <td data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></td>
        <!--/ko-->
      </tr>
      <!-- Your "desc" should be rendered as a row -->
      <tr>
        <td colspan="3" data-bind="text: desc">Test</td>
      </tr>
    </tbody>
  </table>
</script>

的JavaScript

var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95, desc:"This is a description" },
    { name: "Speedy Coyote", sales: 89, price: 190.00 , desc:"This is a description" },
    { name: "Furious Lizard", sales: 152, price: 25.00 , desc:"This is a description" },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 , desc:"This is a description" },
    { name: "Brooding Dragon", sales: 0, price: 6350 , desc:"This is a description" },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 , desc:"This is a description" },
    { name: "Optimistic Snail", sales: 420, price: 1.50 , desc:"This is a description" }
];

var PagedGridModel = function(items) {
    this.items = ko.observableArray(items);

    this.gridViewModel = new ko.simpleGrid.viewModel({
        data: this.items,
        columns: [
            { headerText: "Item Name", rowText: "name" },
            { headerText: "Sales Count", rowText: "sales" },
            { headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
            //Your "desc" is not a column
        ],
        pageSize: 4
    });
};

ko.applyBindings(new PagedGridModel(initialData));

关于javascript - 将最后的td带到tr基因 knockout 的下一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22478751/