在光滑网格列单元格中插入图像并使其可单击

Question

我正在尝试在名为"图像"的列中插入图像，该列应仅包含图像。我正在从图像文件夹中获取图像字典.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上写了一个例子：例

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标签都应该是唯一的！

其次，您应该将 click 事件处理程序附加到包含网格的元素div，并允许冒泡到它，以便它附加到该 html 中的所有未来元素。

最后，图像中的空占位符通常表示您未引用中的图像。仔细检查您的源码...