AG-Grid 单元格 点击查看详情和收起

效果

当单元格内容太长时（条件需要自己写），显示“点击查看详情”超链接，点击后显示全部文本和“收起”链接，点击收起后隐藏内容，并重写显示点击查看详情。

实现原理

定义一个函数，接受两个参数：value和isLongContent

value为单元格内的文本，isLongContent接收一个布尔值，根据isLongContent的值来决定是否显示一段文本。

如果isLongContent为true，则显示"查看详情"链接和文本内容，并隐藏"收起"链接。

如果isLongContent为false，则显示"收起"链接，并隐藏"查看详情"链接和文本内容。

实现过程

1.创建一个div元素作为包装器。

const wrapper = document.createElement('div');

2.创建"查看详情"链接，并添加到包装器中。

const showDetailLink = document.createElement('a');
showDetailLink.textContent = '点击查看详情';
showDetailLink.style.display = isLongContent ? 'block' : 'none'; // 初始显示状态
wrapper.appendChild(showDetailLink);

3.创建"收起"链接，并添加到包装器中。

const hideDetailLink = document.createElement('a');
hideDetailLink.textContent = '收起';
hideDetailLink.style.display = 'none'; // 初始隐藏
wrapper.appendChild(hideDetailLink);

4.创建pre元素，并添加到包装器中。（此处随意，我这里是做了超过4行文本就展示滚动条）

const preElement = document.createElement('pre');
preElement.classList.add('ag-pre');
preElement.textContent = value;
preElement.style.display = isLongContent ? 'none' : 'block'; // 根据内容长度设置初始显示状态
wrapper.appendChild(preElement);

5.为"查看详情"链接和"收起"链接添加点击事件监听器。

showDetailLink.addEventListener('click', function(e) {
  e.preventDefault();
  showDetailLink.style.display = 'none';
  hideDetailLink.style.display = 'block';
  preElement.style.display = 'block';
});

hideDetailLink.addEventListener('click', function(e) {
  e.preventDefault();
  hideDetailLink.style.display = 'none';
  showDetailLink.style.display = 'block';
  preElement.style.display = 'none';
});

当"查看详情"链接被点击时，"查看详情"链接会隐藏，preElement会显示，同时"收起"链接会显示；当"收起"链接被点击时，"收起"链接会隐藏，preElement会隐藏，同时"查看详情"链接会显示。

6.返回包装器。

return wrapper;

 完整代码：

export function fixHideLongtextRenderer(value, isLongContent) {
  const wrapper = document.createElement('div');

  // 创建"查看详情"链接
  const showDetailLink = document.createElement('a');
  showDetailLink.textContent = '点击查看详情';
  showDetailLink.style.display = isLongContent ? 'block' : 'none'; // 初始显示状态
  wrapper.appendChild(showDetailLink);

  // 创建"收起"链接
  const hideDetailLink = document.createElement('a');
  hideDetailLink.textContent = '收起';
  hideDetailLink.style.display = 'none'; // 初始隐藏
  wrapper.appendChild(hideDetailLink);

  // 创建pre标签
  const preElement = document.createElement('pre');
  preElement.classList.add('ag-pre');
  preElement.textContent = value;
  preElement.style.display = isLongContent ? 'none' : 'block'; // 根据内容长度设置初始显示状态
  wrapper.appendChild(preElement);

  // 添加事件监听
  showDetailLink.addEventListener('click', function(e) {
    e.preventDefault();
    showDetailLink.style.display = 'none';
    hideDetailLink.style.display = 'block';
    preElement.style.display = 'block';
  });

  hideDetailLink.addEventListener('click', function(e) {
    e.preventDefault();
    hideDetailLink.style.display = 'none';
    showDetailLink.style.display = 'block';
    preElement.style.display = 'none';
  });

  return wrapper;
}

 使用：

const columnConfig = [
... // 其他列配置
{
  field: 'keyIssues',
  headerName: '重点问题',
  headerTooltip: '重点问题',
  cellRenderer: function({value}) {
    try {
      return fixHideLongtextRenderer(JSON.parse(value)?.join('\n'), JSON.parse(value)?.length > 10); // 自定义你的判断条件
    } catch (e) {
      return value;
    }
  }
...
}
...
]

总结：

这个函数实现了一个文本内容的展开/收起功能，并且通过链接的显示和隐藏来控制文本的显示状态。