JavaScript 技術 -- Google 的表格繪製

Google程式

簡介

網址服務

JavaScript

搜尋服務

繪圖服務

AppScript

Python

Java

GAE

Android

相關訊息

相關網站

相關文獻

最新修改

訊息

相關網站

參考文獻

最新修改

簡體版

English

程式範例

<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <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() {
      // Create and populate the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Name');
      data.addColumn('number', 'Height');
      data.addColumn('boolean', 'Smokes');
      data.addRows(3);
      data.setCell(0, 0, 'Tong Ning mu');
      data.setCell(1, 0, 'Huang Ang fa');
      data.setCell(2, 0, 'Teng nu');
      data.setCell(0, 1, 174);
      data.setCell(1, 1, 523);
      data.setCell(2, 1, 86);
      data.setCell(0, 2, true);
      data.setCell(1, 2, false);
      data.setCell(2, 2, true);

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

    google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="table"></div>
  </body>
</html>

執行結果

googleTable.png

圖一、範例的 Google 表格繪製結果

進階:繪製可翻頁的表格

<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <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">
    var visualization;
    var data;

    var options = {'showRowNumber': true};
    function drawVisualization() {
      // Create and populate the data table.
      var dataAsJson = 
      {cols:[
        {id:'A',label:'Name',type:'string'},
        {id:'B',label:'Height',type:'number'},
        {id:'C',label:'Coming',type:'boolean'},
        {id:'D',label:'Time',type:'timeofday'}],
      rows:[
        {c:[{v:'Dave'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[12,25,0,0],f:'12:25:00'}]},
      {c:[{v:'Peter'},{v:185.0,f:'185'},{v:false,f:'FALSE'},{v:[13,15,0,0],f:'13:15:00'}]},
      {c:[{v:'John'},{v:145.0,f:'145'},{v:true,f:'TRUE'},{v:[15,45,0,0],f:'15:45:00'}]},
      {c:[{v:'Moshes'},{v:198.0,f:'198'},{v:true,f:'TRUE'},{v:[16,32,0,0],f:'16:32:00'}]},
      {c:[{v:'Karen'},{v:169.0,f:'169'},{v:true,f:'TRUE'},{v:[19,50,0,0],f:'19:50:00'}]},
      {c:[{v:'Phil'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[18,10,0,0],f:'18:10:00'}]},
      {c:[{v:'Gori'},{v:159.0,f:'159'},{v:true,f:'TRUE'},{v:[13,15,0,0],f:'13:15:00'}]},
      {c:[{v:'Bill'},{v:155.0,f:'155'},{v:false,f:'FALSE'},{v:[7,40,48,0],f:'7:40:48'}]},
      {c:[{v:'Valery'},{v:199.0,f:'199'},{v:true,f:'TRUE'},{v:[6,0,0,0],f:'6:00:00'}]},
      {c:[{v:'Joey'},{v:187.0,f:'187'},{v:true,f:'TRUE'},{v:[5,2,24,0],f:'5:02:24'}]},
      {c:[{v:'Karen'},{v:190.0,f:'190'},{v:true,f:'TRUE'},{v:[6,14,24,0],f:'6:14:24'}]},
      {c:[{v:'Jin'},{v:169.0,f:'169'},{v:false,f:'FALSE'},{v:[5,45,36,0],f:'5:45:36'}]},
      {c:[{v:'Gili'},{v:178.0,f:'178'},{v:true,f:'TRUE'},{v:[6,43,12,0],f:'6:43:12'}]},
      {c:[{v:'Harry'},{v:172.0,f:'172'},{v:false,f:'FALSE'},{v:[6,14,24,0],f:'6:14:24'}]},
      {c:[{v:'Handerson'},{v:175.0,f:'175'},{v:true,f:'TRUE'},{v:[6,57,36,0],f:'6:57:36'}]},
      {c:[{v:'Vornoy'},{v:170.0,f:'170'},{v:true,f:'TRUE'},{v:[13,12,0,0],f:'13:12:00'}]}]};
      data = new google.visualization.DataTable(dataAsJson);

      // Set paging configuration options
      // Note: these options are changed by the UI controls in the example.
      options['page'] = 'enable';
      options['pageSize'] = 10;
      options['pagingSymbols'] = {prev: 'prev', next: 'next'};
      options['pagingButtonsConfiguration'] = 'auto';

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

    function draw() {
      visualization.draw(data, options);  
    }

    google.setOnLoadCallback(drawVisualization);

    // sets the number of pages according to the user selection.
    function setNumberOfPages(value) {
      if (value) {
        options['pageSize'] = parseInt(value, 10);
        options['page'] = 'enable';
      } else {
        options['pageSize'] = null;
        options['page'] = null;  
      }
      draw();
    }

    // Sets custom paging symbols "Prev"/"Next"
    function setCustomPagingButtons(toSet) {
      options['pagingSymbols'] = toSet ? {next: 'next', prev: 'prev'} : null;
      draw();  
    }

    function setPagingButtonsConfiguration(value) {
      options['pagingButtonsConfiguration'] = value;
      draw();
    }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div style="margin-bottom: 10px; padding: 5px; border: 1px solid gray; background-color: buttonface;">
      <span> Configure the paging options in the table</span><br /> 
      <form action="">
        <span style="font-size: 12px;">Number of rows:</span>
        <select style="font-size: 12px" onchange="setNumberOfPages(this.value)">
          <option value="">No paging</option>
          <option value="3">3</option>
          <option value="5">5</option>
          <option value="9">9</option>
          <option selected="selected" value="10">10</option>
          <option value="100">100</option>
        </select>
        <span style="padding-left: 5px; font-size: 12px;">Custom paging symbols </span>
        <input type="checkbox" checked="checked" onclick="setCustomPagingButtons(this.checked)">
        <span style="padding-left: 5px; font-size: 12px">Configure buttons enabled/disabled</span>
          <select style="font-size: 12px" id='enable-paging-buttons' onchange='setPagingButtonsConfiguration(this.value)'>
            <option value=''>Default (auto)</option>
            <option value='prev'>prev</option>
            <option value='next'>next</option>
            <option value='both'>both</option>
         </select> 
      </form>
      </div>
    <div id="table"></div>
  </body>
</html>
​

參考文獻

  1. http://code.google.com/apis/ajax/playground/#table
  2. http://code.google.com/apis/ajax/playground/#table_paging

Facebook

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License