1

ノックアウト簡易グリッドを使用してグリッドを作成しました。追加ボタンをクリックするたびに関数が呼び出されるように、各行にクリック可能なボタンを追加するにはどうすればよいですか。

 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/

4

2 に答える 2

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
    });
};
于 2013-11-04T16:40:25.533 に答える
0

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...
});
于 2013-11-04T16:17:33.337 に答える