Question

我使用挖空简单网格创建了一个网格。如何在每行中添加一个可点击按钮，以便每次单击添加按钮时它都会调用一个函数。

 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) } },
        { headerText: "Add", rowText: "Add"}
    ],
    pageSize: 4
});

这是我的jsfiddle

http://jsfiddle.net/ramon26cruz/fNhKp/1/

Answer 1

首先，nemesv是对的，这可能不适合生产使用。

如果您仍想更改它，可以覆盖用于渲染网格的模板（更新的小提琴：http://jsfiddle.net/fNhKp/4/）。

首先创建一个新模板并指定simpleGridTemplate绑定：

<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 if: typeof rowText == 'object' && typeof rowText.action == 'function'-->
                                   <td><button data-bind="click:rowText.action($parent)">action</button></td>
                                   <!-- /ko -->
                                   <!--ko ifnot: typeof rowText == 'object' && typeof rowText.action == 'function'-->
                                   <td data-bind="text: typeof rowText == 'function' ? rowText($parent) : $parent[rowText] "></td>
                                   <!--/ko-->
                                </tr>
                            </tbody>
                        </table>
    </script>

然后像这样修改你的js：

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) } },
            { headerText: "Add", rowText: "Add"},
            { headerText: "Action", rowText: {action: function(item){
                return function(){
                    console.log(item)
                }
                }}}
        ],
        pageSize: 4
    });
};

Answer 2

您可以使用jQuery添加点击事件：

 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) }     },
        { headerText: "Add", rowText: "Add"}
    ],
    pageSize: 4
});
$('table.ko-grid tr td:last').live('click',function() {
    // Do something here...
});

将事件添加到简单网格的行

2 个答案: