formatter 버튼의 click 리스너 설정

안녕하세요,

formatter 버튼의 click 리스너를 설정할때 https://github.com/ax5ui/ax5ui-grid/issues/42를 참고하여 구현 하였습니다.

formatter와 클릭리스너 코드는 아래와 같습니다.

formatter:

{key: 'b', label: '필드B', align: 'center', formatter: function() {
return 'Text \<img width="23px" height="23px" src="/assets/img/search.png" data-custom-btn="' + this.dindex + '"\>';
}

}

클릭리스너 설정

    $('[data-custom-btn]').on('click', function () {
    // console.log('search btn clicked');
    alert(this.getAttribute('data-custom-btn'));
});

하지만 virtualScroll이 true로 설정된 상태에서 스크롤을 하면 jquery로 설정한 클릭리스너가 더 이상 작동하지 않습니다. scroll를 할때 내부적으로 뷰를 다시 생성하는 것 같은데 그때 다시 jquery로 클릭 리스너를 다시 설정해야 하는것 같습니다.

또한 rowSelector 중에서 전체 row를 select하는 체크박스를 클릭했을때도 위의 클릭 리스너가 같은 이유로 동작하지 않는 것 같습니다.

혹시 이러한 경우에 발생하는 이벤트에서나 어디서든 click리스너를 설정할 만한 위치가 있을까요? 또는 위의 방식에서 제가 잘못 접근한 부분이 있나요?

감사합니다

셀의 클릭 이벤트를 잡을 수 있는 grid body의 onClick 메서드를 쓰기를 권장합니다!

하지만 셀 안의 엘리먼트에 클릭 이벤트를 주고 싶으시다면…
onClick과 onChange를 이용하여 함수를 호출하는 방법을 사용했습니다.
전역에 함수를 만들면 위험(?)할 것 같아 jQuery.extend를 사용하여 함수를 만들었습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Issue #42-2 그리드 예제</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5core/master/dist/ax5core.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-grid/master/dist/ax5grid.min.js"></script>
</head>
<body>
<div data-ax5grid="my-grid" data-ax5grid-config="{}" style="height: 300px;"></div>
<script type="text/javascript">
  var myGrid = new ax5.ui.grid();
  $(document.body).ready(function () {

    var fn_disabled = function () {
      return function () {
        return this.value != "edit";
      };
    };

    myGrid.setConfig({
      target: $('[data-ax5grid="my-grid"]'),
      columns: [
        {key: "a", label: "header1", editor: {type: "text", disabled: fn_disabled()}},
        {key: "b", label: "header2", editor: {type: "text", disabled: fn_disabled()}},
        {key: "c", label: "header3", editor: {type: "text", disabled: fn_disabled()}},
        {key: "d", label: "header4", editor: {type: "text", disabled: fn_disabled()}},
        {
          key: "e", label: "header5", editor: {type: "text", disabled: fn_disabled()},
          formatter: function () {
            var returnValue = "";
            switch (this.value) {
              case "checkbox" :
                returnValue = '<label><input type="checkbox" onclick="$.customFn(this, ' + this.dindex + ')"/> 체크박스</label>';
                break;
              case "button"   :
                returnValue = '<button type="button" onclick="$.customFn(this, ' + this.dindex + ')">버튼</button>';
                break;
              default:
                returnValue = this.value;
                break;
            }// end switch
            return returnValue;
          }
        }
      ]
    });

    // 그리드 데이터 가져오기
    myGrid.setData([
      {a: "merge", b: "merge", c: "merge", d: "edit", e: "checkbox"},
      {a: "merge", b: "merge", c: "merge", d: "text", e: "empty"},
      {a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
      {a: "text", b: "text", c: "text", d: "edit", e: "text"},
      {a: "text", b: "text", c: "text", d: "edit", e: "text"},
      {a: "text", b: "text", c: "text", d: "edit", e: "text"},
      {a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
      {a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
      {a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
      {a: "merge", b: "merge", c: "merge", d: "empty", e: "button"},
      {a: "merge", b: "merge", c: "merge", d: "empty", e: "button"}
    ]);
  });


  jQuery.extend({
    "customFn": function (el, i) {
      // 함수 정의
      var data = myGrid.list[i];

      switch (data.e) {
        case "button":
          // 버튼을 눌렀을 때 함수 정의
          console.log(data.e + ":" + i);
          break;
        case "checkbox":
          // 체크박스를 눌렀을 때 함수 정의
          console.log(data.e + ":" + el.checked);
          break;
              /*
               *  case ...
               */
        default:
          break;
      }
    }
  });
</script>
</body>
</html>
3개의 좋아요
$("#target").on("click", "[data-custom-btn]", function(){
});

이러면 그냥 되실 것 같은데요.

넵 감사합니다, 이 방법이 잘되네요!