slickgrid - 在 slickgrid 列单元格中插入图像并使其可点击

Question

我正在尝试在名为“图像”的列中插入图像，该列应仅包含图像。我正在从 Images 文件夹中获取图像 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 标签应该是唯一的!

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

最后，图像中的空占位符通常意味着您没有引用该图像。仔细检查您的源...