如何顯示/隱藏谷歌圖表的表格單元格的內容

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>

我希望它可以幫助你，再見。