2

这段代码工作得很好，除了一个小的格式问题我找不到一个简单的方法来解决。作为数据源的谷歌电子表格在列中有换行符。但是，在表格中，它们看起来好像只是由空格格式化。我尝试在数据表中使用 allowHthml 选项（在将换行符转换为
标签之后），但这会删除所有格式并使表格看起来很糟糕。我也尝试过“Formatter”类，但这似乎更倾向于连接字段，并且也遵循相同的 no-html 规则。

任何人都知道我在这里缺少的东西可以让换行符在表格中正确显示而不会破坏格式。我想简单地将换行符添加到字段中，以便它们正确显示。

您可以将其复制/粘贴到 jsLint 中，它会运行并向您显示我在说什么。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">


function drawVisualization() {

  var opts = {dataType:'jsonp'};

  var query = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0AiEVKSSB6IaqdDZBTGJqV0lLZEV3YS0teXZkOWR4M3c&output=html', opts);

  query.setQuery("select * ");

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {  
  // Create and populate the data table.
  var data = response.getDataTable();

    // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, null);
}
google.setOnLoadCallback(drawVisualization);

​</p>

4

1 回答 1

1

这可能是一个 hacky 解决方案，但是使用 JavaScript 方法将字符串中的所有换行符替换为 <br /> 标签怎么样？我还添加了少量 CSS，以便新表格具有底部垂直对齐（就像原始电子表格一样）。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">

function drawVisualization() {
  var opts = {dataType:'jsonp'};
  var query = new google.visualization.Query('https://docs.google.com/spreadsheet/pub?key=0AiEVKSSB6IaqdDZBTGJqV0lLZEV3YS0teXZkOWR4M3c&output=html', opts);

  query.setQuery("select * ");

  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  // Create and populate the data table.
  var data = new google.visualization.DataTable(
        response.getDataTable().toJSON().split("\\n").join("<br />"));

  var opts = {'allowHtml': true};

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, opts);
}

google.setOnLoadCallback(drawVisualization);

</script>

<style type="text/css">
.google-visualization-table-td{
    vertical-align: bottom;
}
</style>
<div id="table"></div>
于 2012-04-12T22:57:44.873 回答