handsonTable 클릭 이벤트 인스턴스

다음 코드가 구현한 기능은handsonTable를 만들어서 표를 편집할 수 있지만 임의의cell을 눌러서 이cell에 새 내용을 설정하는 것입니다
HTML 코드:


<html>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.min.js"></script>

<body>
    <div id="basic_example"></div>
</body>
</html>

javascript 코드:


$(document).ready(function () {
  var container = document.getElementById('basic_example');
 
  var data = function () {
   return Handsontable.helper.createSpreadsheetData(100, 12);
  };
  
  var hot = new Handsontable(container, {
    data: data(),
    height: 396,
    colHeaders: true,
    rowHeaders: true,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: true
  });
  //         
function callBack(event,coords,td){
	var row = coords.row;
	var col = coords.col;
         if(row!=0 && col!=0){
	      var ss = hot.getCell(row,col,true);//    Cell
               var currVal = $(ss).html();//    Cell   
               hot.setDataAtCell(row,col,"  cell  ","edit");//  cell    
         }
}
//    
Handsontable.hooks.add('afterOnCellMouseDown',callBack,hot);
		
});

handsonTable 클릭 이벤트 인스턴스

좋은 웹페이지 즐겨찾기