Question

我正在尝试在名为＆＃34; Image＆＃34;的列中插入图像。它应该只包含图像。我从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

＆＃13;

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");
});

＆＃13;

img.clickableImage{
   cursor: pointer; 
}

＆＃13;

<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>

＆＃13;

您的代码上几乎没有问题：

首先，您不能在格式化程序中的图像标记上添加ID，对于您身体中的所有html标记，ID应该是唯一的！

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

最后，图像中的空占位符通常意味着您没有参考图像。仔细检查你的src ...

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

1 个答案: