간단한 그리드 행에 이벤트 추가

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/).

<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를 수정 :

그래서 먼저 새 템플릿을 생성하고 지정 simpleGridTemplate 바인딩 ko.simpleGrid`의 소스를 수정하지 않고

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... 
});