렌더링

html 렌더링(jQuery UI Slider를 컬럼)

컬럼 데이터를 HTML로 편집하여 셀에 표시하려면
QCELL 프로퍼티에서 {..., type : "html", options: {html : {data: fnParkingUsing}}}를 추가하여 렌더링 함수를 등록하고 필요한 편집 기능을 구현하면 됩니다.

여기에서는 jQuery UI Slider를 컬럼의 데이터와 연동시켜 슬라이더를 조정하면 데이터를 수정할 수 있도록 구현했습니다.

컬럼 내부에는 div를 생성하여 리턴하고, 약간의 텀을 두어 jQuery UI Slide를 생성한 div에 실행있도록 하였습니다.

function fnParkingUsing(id, row, col, val, obj){
 var cssName = 'rt-qc-silder',
 tid = 'cell_'+row+'_'+col,
 html = $('<div>').css({'height': '10px', 'width': '90%', 'top': '10px', 'margin': 'auto'}).addClass(cssName);

 setTimeout(function(){
  if($('#'+tid).find('.'+cssName).length == 1){
   $('#'+tid).find('.'+cssName).slider({min: 0, max: 100, step: 10, value: val, change: function(event, ui){
    qcell.setCellData(row, col, ui.value);
   }}).slider("pips", {rest: "label", suffix: "%"});
  }
 }, 100);

 return html[0].outerHTML;
};