制表器图像点击放大

Question

我是 reactjs 的新手，我是制表器的新手。我正在使用制表符来显示一行，该行在其中一列中也有图像，如下所示。

enter image description here

我想把图片放大到原来的大小。我怎样才能做到这一点。

这是下面的代码：

const ForwardInventoryColumns=[
      {formatter:"responsiveCollapse", width:100, minWidth:100, align:"center", resizable:false, 
      headerSort:false},
      {
        title: "",
        field: "",
        align: "center",
        
        
        headerSort:false,
        
        formatter: reactFormatter(<UpdateDataButton />),        
      },
      
      { title: "Type", field: "type", minWidth : 100, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",visible:true},
      { title: "ID", field: "id", minWidth : 100, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",visible:true},
      { title: "Description", field: "desc", minWidth : 100, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",
      editor: "number", editorParams: {allowEmpty: false},cellEdited:this.updateTableData,  
        validator: 
       {type:"max", parameters:99999999 },visible:true},
      { title: "ImageURL", field: "imgurl", minWidth : 100, headerSort: false,headerFilter: "input", 
       headerFilterPlaceholder:"search...",
       editorParams: {allowEmpty: false},cellEdited:this.updateTableData , validator:{type:"max", 
       parameters:99999999 },visible:true,formatter:"image", formatterParams:{height:"50px",
       width:"50px",
       urlPrefix:"http://website.com/images/",
       urlSuffix:".png",
          }},
      { title: "Active", field: "active", minWidth : 100, headerSort: false,headerFilter: "input", 
      headerFilterPlaceholder:"search...",
      editor: "number", editorParams: {allowEmpty: false},cellEdited:this.updateTableData , 
      validator: 
      {type:"max", parameters:99999999 },visible:true}

Answer 1

又快又脏？将 formatterParams 中的宽度参数设置为更大的值。 （或完全摆脱 height + width 并将其放在 minWidth 列属性中）

越长越复杂，您可能需要遍历行，在 imgurl 字段中获取实际的 ，获取其宽度并跟踪最宽的图像。然后使用

updateColumnDefinition("imgurl", {minWidth:savedMaxWidth});

我看到的问题是什么时候你会走行找到最大的图像吗？你不知道浏览器什么时候拉出了所有的图片才知道是时候去搜索并找到最大的图片了？

Answer 2

代码不行，但总体思路...

<div id='dialog' style='display:none;z-index:2;width:100%;height:100%:position:relative'>
    <span style='position:absolute:top:0:right:0' onclick="document.getElementById('dialog').style.display='none'"><b>X</b></span>
    <img id='blowup' src=''>
</div>
<div id="tabulator"></div>

...

cellclick:function(e,cell) {
   document.getElementById('blowup').src = cell.getValue();
   document.getElementById('dialog').style.display = 'block';
},