Slickgrid 사용자 정의 셀 편집기가 모든 셀을 업데이트합니다.

Question

http://mleibman.github.io/SlickGrid/examples/example3a-compound-editors.html에 코드를 약간 사용자 지정하여 분자 및 분모를 취한 사용자 정의 편집기를 제공하고 값이 업데이트되면 백분율을 표시합니다 (사용자 정의 포매터 코드 -

).

function NumericRangeFormatter(row, cell, value, columnDef, dataContext) { 
     return isNaN(dataContext.from/dataContext.to) ? "" : ((dataContext.from/dataContext.to) * 100).toFixed(2) + "%"; 
    } 

예상대로 작동하지만 사용자 정의 편집기/포맷터를 사용하는 것으로 식별 된 열이 두 개 이상인 경우 행에있는 셀을 편집 할 때 결함이있는 것으로 나타났습니다. 해당 편집기를 사용하는 나머지 셀은 동일한 값으로 업데이트됩니다.

내 열은 다음과 같이 정의된다 : -

var columns = [ 
    {id: "indicator", name: "Indicator", field: "indicator", width:300}, 
    { id: "apr", name: "April", field: "apr", width: 100, formatter: NumericRangeFormatter, editor: NumericRangeEditor }, 
    { id: "may", name: "May", field: "may", width: 100, formatter: NumericRangeFormatter, editor: NumericRangeEditor }, 
    { id: "jun", name: "June", field: "jun", width: 100,formatter: NumericRangeFormatter, editor: NumericRangeEditor } 
    ]; 

그래서, 기본적으로, 나는 '4월'열의 셀 모두의 셀을 편집하는 경우 '월'같은과 '6월'갱신 값. 나는이 행동을 원하지 않는다.

편집기에서 값을 처리하는 코드에서 분명히 잘못된 것이 보이지 않으며 지침을 https://github.com/mleibman/SlickGrid/wiki/Writing-custom-cell-editors에서 읽었습니다.

실종 신고 된 것이 있습니까? 에디터의 코드는 다음과 같습니다 : -

function NumericRangeEditor(args) { 
     var $from, $to; 
     var scope = this; 
     this.init = function() { 
      $from = $("<INPUT type=text style='width:40px' />") 
       .appendTo(args.container) 
       .bind("keydown", scope.handleKeyDown); 
      $(args.container).append("&nbsp;/&nbsp;"); 
      $to = $("<INPUT type=text style='width:40px' />") 
       .appendTo(args.container) 
       .bind("keydown", scope.handleKeyDown); 
      scope.focus(); 
     }; 

     this.handleKeyDown = function (e) { 
      if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT || e.keyCode == $.ui.keyCode.TAB) { 
       e.stopImmediatePropagation(); 
      } 
     }; 

     this.destroy = function() { 
      $(args.container).empty(); 
     }; 

     this.focus = function() { 
      $from.focus(); 
     }; 

     this.serializeValue = function() { 
      return { from: parseInt($from.val(), 10), to: parseInt($to.val(), 10) }; 
     }; 

     this.applyValue = function (item, state) { 
      item.from = state.from; 
      item.to = state.to; 
     }; 

     this.loadValue = function (item) { 
      $from.val(item.from); 
      $to.val(item.to); 
     }; 

     this.isValueChanged = function() { 
      return args.item.from != parseInt($from.val(), 10) || args.item.to != parseInt($from.val(), 10); 
     }; 

     this.validate = function() { 
      if (isNaN(parseInt($from.val(), 10)) || isNaN(parseInt($to.val(), 10))) { 
       return { valid: false, msg: "Please type in valid numbers." }; 
      } 
      if (parseInt($from.val(), 10) > parseInt($to.val(), 10)) { 
       return { valid: false, msg: "'from' cannot be greater than 'to'" }; 
      } 
      return { valid: true, msg: null }; 
     }; 
     this.init(); 
    } 

Answer 1

당신은 즉 같은 포맷/편집기를 사용하여 [apr,may,jun]을 열 수 있습니다.

to 및 from 인 dataContext 내에서 동일한 필드를 참조하는 것이 문제입니다. [apr,may,jun] 열에서 편집기를 열면 to 및 from 필드를 덮어 쓰게됩니다. 따라서 포맷터가 참조와 동일한 필드를 사용하기 때문에 변경 사항이 다른 열에도 반영됩니다.

이 문제를 해결하려면 dataContext에 새 필드를 추가하여 매월 값을 저장해야합니다. aprilTo, aprilFrom, mayTo, mayFrom, junTo, junFrom.

function NumericRangeFormatter(row, cell, value, columnDef, dataContext) { 
     return isNaN(dataContext[columnDef.field + 'From']/dataContext[columnDef.field + 'To']) ? "" : ((dataContext[columnDef.field + 'From'] /dataContext[columnDef.field + 'To']) * 100).toFixed(2) + "%"; 
} 

: 그런 다음에

this.applyValue = function (item, state) { 
     item[args.column.field + 'From'] = state.from; 
     item[args.column.field + 'To'] = state.to; 
};` 

포맷터에 편집기 변경