javascript - 如何显示/隐藏谷歌图表的表格单元格内容

Question

我正在使用Google charts table显示从服务器抛出的异常。现在的问题是单元格中显示的错误/异常太长(行太多)。

我想知道如何使每个单元格仅显示错误消息的摘录，并在单元格中摘录的开头添加了加号/扩展( + )符号。这样当点击+时，弹出一个模式框，显示所有错误消息。

现在我已经使模态框正常工作，当我单击单元格时，会弹出一个带有错误的模态框。问题实际上归结为

1. 如何编写一些 js 函数，将错误抽象为仅在单元格中显示的一行或几行；
2. 如何添加+到单元格的开头，并创建一个事件处理程序来监听事件，例如单击 + 时，这样就会立即弹出一个模态框；
3. 顺便问一下，+ 是否有一个漂亮的小工具？在Google charts对于表格单元格。

提前致谢。

Answer 1

1. how to write some js functions which abstract the errors to just one or a few line(s) to be shown in a cell

您可以使用 JavaScript substring 函数 chop 单元格中的值

2. how to add a + to the beginning of the cell, and create an event handler for listening events like when clicking the +, so that a modal box will pop up immediately;

您可以启用 html 以添加您想要的所有内容，例如带有“+”符号的链接，将选项 allowHtml: true 添加到 google表。

请参阅以下示例，我使用警报显示“长消息”，您可以轻松地使用 jQuery dialog 显示它或您喜欢的其他很酷的对话框。

const MAX_LENGTH = 30;

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Server IP');
  data.addColumn('string', 'Exception');
  data.addColumn('boolean', 'Critical');
  var logData = [];
  logData.push(formatRow(1, '10.0.0.1', longExp, false));
  logData.push(formatRow(2, '10.0.0.2', longExp, true));
  logData.push(formatRow(3, '10.0.0.2', longExp, false));
  logData.push(formatRow(4, '10.0.0.3', 'Short exception', true));
  logData.push(formatRow(5, '10.0.0.3', longExp, false));
  data.addRows(logData);

var table = new google.visualization.Table(document.getElementById('table_div'));

table.draw(data, {showRowNumber: true, width: '100%', height: '100%', allowHtml: true});
}

var longExp = 'java.io.IOException: Cannot run program "/home/Work/jre1.6.0_45/bin/java": error=13, Permission denied\n	at\n java.lang.ProcessBuilder.start(ProcessBuilder.java:1048)\n	at java.lang.Runtime.exec(Runtime.java:620)\n	at\njava.lang.Runtime.exec(Runtime.java:528)\n	at org.eclipse.debug.core.DebugPlugin.exec(DebugPlugin.java:879)\n	at org.eclipse.jdt.launching.AbstractVMRunner.exec(AbstractVMRunner.java:91)\n	at org.eclipse.jdt.internal.launching.StandardVMRunner.run(StandardVMRunner.java:413)\n org.eclipse.jdt.internal.launching.environments.Analyzer.analyze(Analyzer.java:41)';

function formatRow(id, ip, err_msg, criticity){
  if(err_msg.length > MAX_LENGTH){
    err_msg = err_msg.substring(0, MAX_LENGTH) + "…";
    err_msg += '<a href="#" onclick="javascript:show(' + id + ')">[more]</a>';
  }
  return [ip, err_msg, criticity]; 
}

function show(id){
  //TODO: get complete message from id
  alert(longExp);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

希望对你有帮助，再见。