Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] 判断单元格是否在可视区,返回结果不符合预期 #1864

Closed
happypayne opened this issue Jun 5, 2024 · 0 comments · Fixed by #1930
Closed

[Bug] 判断单元格是否在可视区,返回结果不符合预期 #1864

happypayne opened this issue Jun 5, 2024 · 0 comments · Fixed by #1930
Assignees
Labels
bug Something isn't working

Comments

@happypayne
Copy link

Version

1.1.1

Link to Minimal Reproduction

https://visactor.io/vtable/demo/basic-functionality/export-image

Steps to Reproduce

在官网这个demo 中加了一行代码,判断单元格是否在可视区,视觉上是在可视区,但返回了 false

const chartDiv=document.getElementById(CONTAINER_ID);
// Create a container div for the buttons
const buttonContainer = document.createElement("div");
buttonContainer.style.position = "absolute";
buttonContainer.style.top = "0";
buttonContainer.style.zIndex=88888;

// Create the first button
const screenshotBtn = document.createElement("button");
screenshotBtn.textContent = "exportImg";

// Create the second button
const export1ImgBtn = document.createElement("button");
export1ImgBtn.textContent = "exportImg[2,2]";

// Create the third button
const export2ImgBtn = document.createElement("button");
export2ImgBtn.textContent =  "exportImg[2,2]到[4,3]";

const clearImgBtn = document.createElement("button");
clearImgBtn.textContent =  "clear export image";

// Append the buttons to the container div
buttonContainer.appendChild(screenshotBtn);
buttonContainer.appendChild(export1ImgBtn);
buttonContainer.appendChild(export2ImgBtn);
buttonContainer.appendChild(clearImgBtn);
screenshotBtn.onclick=export1ImgBtn.onclick=export2ImgBtn.onclick=(e)=>{
  const imageDom=document.createElement('img');
  let base64String;
  if(e.target.textContent==='exportImg'){
    imageDom.style.width='140px';
    imageDom.style.height='100px';
    base64String=tableInstance.exportImg();
  }else if(e.target.textContent==='exportImg[2,2]')
    base64String=tableInstance.exportCellImg(2,2);
  else 
    base64String=tableInstance.exportCellRangeImg({start:{col:2,row:2},end:{col:4,row:3}});

  imageDom.style.display='block';
  imageDom.src=base64String;
  buttonContainer.appendChild(imageDom);
}
clearImgBtn.onclick=(e)=>{
  // 获取目标 div 下的所有 img 标签
  const imgElements = buttonContainer.getElementsByTagName("img");

  // 遍历所有的 img 标签并移除它们
  while (imgElements.length > 0) {
    const imgElement = imgElements[0]; // 获取第一个 img 标签
    imgElement.parentNode.removeChild(imgElement); // 从父节点中移除 img 标签
  }
}

// Insert the container div into the chart div
chartDiv.parentElement.appendChild(buttonContainer);

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data100.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
  {
        "field": "Category",
        "title": "Category",
        "width": "auto",
        sort:true,
        "mergeCell": true,
        style:{
          "textStick":true,
          textAlign:'right'
        }
    },
    {
        "field": "Sub-Category",
        "title": "Sub-Category",
        "width": "auto",
        sort:true,
        "mergeCell": true,
    },
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto"
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto",
        headerStyle:{
          "textStick":true,
        }
    },
    {
        "field": "Region",
        "title": "Region",
        "width": "auto"
    },
    {
        "field": "City",
        "title": "City",
        "width": "auto"
    },
    {
        "field": "Order Date",
        "title": "Order Date",
        "width": "auto"
    },
    {
        "field": "Quantity",
        "title": "Quantity",
        "width": "auto"
    },
    {
        "field": "Sales",
        "title": "Sales",
        "width": "auto"
    },
    {
        "field": "Profit",
        "title": "Profit",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  hover:{
    highlightMode:'row'
  },
  sortState:{
    field:'Category',
    order:'asc'
  }
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
tableInstance.on('after_render', () => {
  console.log(tableInstance.cellIsInVisualView(1, 2))
});
    })

Current Behavior

单元格在可视区内,但是返回 false

Expected Behavior

希望返回值与预期一致

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

@happypayne happypayne added the bug Something isn't working label Jun 5, 2024
@happypayne happypayne changed the title [Bug] 判断单元格是否在可视区,返回结果不符合语气 [Bug] 判断单元格是否在可视区,返回结果不符合预期 Jun 5, 2024
@fangsmile fangsmile self-assigned this Jun 6, 2024
@fangsmile fangsmile linked a pull request Jun 17, 2024 that will close this issue
21 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants