javascript - 将最后一个 td 带到 tr knockout 中的下一行

Question

我想把最后一列“描述”放到下一行

这是 fiddle 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 

提前感谢您的帮助

Answer 1

你应该有这样的东西:(我已经更新了你的 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));