slickgrid 열 셀에 이미지를 삽입하고 클릭 가능하게하십시오.

Question

이미지 만 포함해야하는 "이미지"라는 열에 이미지를 삽입하려고합니다. 이미지 폴더에서 이미지 Dictionary.png을 가져오고 열의 초기화 중에 열에 경로를 지정했습니다. 먼저 열 셀에는 이미지가 표시되지 않지만 위치 표시자는 표시됩니다. 내가 코드에서 누락 된 부분은 무엇입니까? 둘째, 이미지를 클릭 할 수 있도록 설정하여 이미지를 클릭 할 때 경고 상자가 나타나야합니다. 이미지를 삽입하고 클릭하면 알림 상자가 표시되도록 작성한 코드를 찾으십시오. src에 주어진 경로가 맞습니다. 누군가가이 문제를 해결할 수 있다면 도움이 될 것입니다.

columns = [{ id:"Image" name:"Image", field: "image",formatter: function(args) {return "<img id='Image' src ='../../Images/Bookimage.png'></img>" } }]; 

$('#Image').on('click', function() { 
alert("It Works"); 
}); 

Answer 1

내가 jsFiddle에서 예를 작성했습니다 : 코드에 몇 가지 문제가 Example

var imageFormatter = function(){ 
 
    return "<img class='clickableImage' src='http://mleibman.github.io/SlickGrid/images/tick.png' />"; 
 
}; 
 

 
var grid; 
 
    var data = []; 
 
    var columns = [ 
 
     {id: "imageCol", name: "Image", field: "somefield", sortable: false, width: 80, minWidth: 20, maxWidth: 80, formatter: imageFormatter} 
 
    ]; 
 

 
var options = { 
 
    editable: false, 
 
    enableAddRow: false, 
 
    enableCellNavigation: false, 
 
    enableColumnReorder: false 
 
    }; 
 

 
    $(function() { 
 
    for (var i = 0; i < 5; i++) { 
 
     data.push({somefield:true}); 
 
    } 
 

 
    grid = new Slick.Grid("#grid", data, columns, options); 
 
    }); 
 

 
$("#grid").on("click", "img.clickableImage", function(){ 
 
    alert("clicked"); 
 
});

img.clickableImage{ 
 
    cursor: pointer; 
 
}

<div id="grid" style="height: 300px;"></div> 
 

 
<link href="http://mleibman.github.io/SlickGrid/examples/examples.css" rel="stylesheet"/> 
 
<link href="http://mleibman.github.io/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet"/> 
 
<link href="http://mleibman.github.io/SlickGrid/slick.grid.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script> 
 
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script> 
 
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>

했다 :

먼저 ID를 넣을 수 없습니다 포맷터의 이미지 태그에 ID는 본문의 모든 HTML 태그에 대해 고유해야합니다.

둘째, 그리드가 포함 된 요소 인 div에 click 이벤트 처리기를 연결하고 그 안에 버블 링을 허용하여 해당 html 내부의 모든 향후 요소에 첨부해야합니다.

마지막으로 이미지의 빈 장소 홀더는 일반적으로 사용자가 참조하지 않은 이미지를 의미합니다. src를 다시 확인하십시오 ...