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

Question

我正在使用Google charts table来显示从服务器抛出的异常。现在问题是错误/例外太长（线路太多），显示在单元格中。

我想知道如何使每个单元格只显示错误消息的摘录，并且还在单元格的摘录的开头添加了一个加号/扩展（+）符号。所以当点击+时，弹出一个模式对话框，显示所有的错误信息。

现在我已经做出了模态框的工作，当我点击一个单元格，弹出错误的模态框。这些问题真的可以归结为

1. 如何写一些js的功能，这抽象的错误，而只是一个或几个线（S）在单元格中显示;
2. 如何将+添加到单元格的开头，并创建一个事件处理程序用于监听事件，如单击+时，以便模式框立即弹出;
3. 作为一个侧面的问题是有+在Google charts表格单元格的好看的小工具。

在此先感谢。

Answer 1

1. 如何写一些js的功能，这抽象的错误，而只是一个 或几个线（S）在单元格中

可以在截断值显示使用javascript的单元格substring函数

1. 如何添加一个+到单元格的开头，并创建一个事件处理程序，用于监听事件，例如单击+时，以便立即弹出一个模式为 的框;

可以，以便添加你想要的每一件事情，喜欢用“+”符号链接启用HTML，新增选项allowHtml: true到google table。

见下面的例子中，我表现出了“长消息”与alert，你可以很容易地用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 \t at\n java.lang.ProcessBuilder.start(ProcessBuilder.java:1048)\n \t at java.lang.Runtime.exec(Runtime.java:620)\n \t at\njava.lang.Runtime.exec(Runtime.java:528)\n \t at org.eclipse.debug.core.DebugPlugin.exec(DebugPlugin.java:879)\n \t at org.eclipse.jdt.launching.AbstractVMRunner.exec(AbstractVMRunner.java:91)\n \t 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>

我希望它可以帮助你，再见。