การดําเนินการในตาราง

Google สไลด์ API ช่วยให้คุณสร้างและแก้ไขตารางในหน้าต่างๆ ได้ ตัวอย่างใน หน้านี้แสดงการดำเนินการกับตารางที่พบบ่อยบางอย่างโดยใช้เมธอด presentations.batchUpdate

ตัวอย่างเหล่านี้ใช้ตัวแปรต่อไปนี้

  • PRESENTATION_ID—ระบุตำแหน่งที่คุณระบุ รหัสงานนำเสนอ คุณดูค่าสำหรับรหัสนี้ได้จาก URL ของงานนำเสนอ
  • PAGE_ID - ระบุตำแหน่งที่คุณระบุรหัสออบเจ็กต์หน้าเว็บ คุณสามารถดึงค่าสำหรับพารามิเตอร์นี้จาก URL หรือโดยใช้คำขออ่าน API
  • TABLE_ID—ระบุตำแหน่งที่คุณระบุรหัสออบเจ็กต์ขององค์ประกอบหน้าเว็บสำหรับตารางที่คุณกำลังทำงานด้วย คุณระบุรหัสนี้สำหรับองค์ประกอบที่สร้างได้ (โดยมีข้อจำกัดบางอย่าง) หรืออนุญาตให้ Slides API สร้างรหัสโดยอัตโนมัติก็ได้ คุณเรียกดูรหัสองค์ประกอบ ได้ผ่านคำขออ่าน API

ตัวอย่างเหล่านี้จะแสดงเป็นคำขอ HTTP เพื่อให้เป็นกลางทางภาษา ดูวิธี ใช้การอัปเดตแบบเป็นชุดในภาษาต่างๆ โดยใช้ไลบรารีไคลเอ็นต์ Google API ได้ที่เพิ่มรูปร่างและข้อความ

สร้างตาราง

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้เมธอด CreateTableRequest เพื่อเพิ่มตารางลงในสไลด์ที่ระบุโดย PAGE_ID

ตารางนี้มี 8 แถวและ 5 คอลัมน์ โปรดทราบว่า Slides API จะไม่สนใจฟิลด์ size หรือ transform ที่ระบุเป็นส่วนหนึ่งของ elementProperties แต่ API จะสร้างตารางที่อยู่กึ่งกลางสไลด์โดยประมาณและปรับขนาดให้พอดีกับจำนวนแถวและคอลัมน์ที่ระบุ หากเป็นไปได้

ต่อไปนี้คือโปรโตคอลคำขอในการสร้างตาราง

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "createTable": {
        "objectId": TABLE_ID,
        "elementProperties": {
          "pageObjectId": PAGE_ID,
        },
        "rows": 8,
        "columns": 5
      }
    }
  ]
}

ลบแถวหรือคอลัมน์ของตาราง

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้เมธอด DeleteTableRowRequest เพื่อนำแถวที่ 6 ออก จากนั้นจะใช้วิธี DeleteTableColumnRequest เพื่อนำคอลัมน์ที่ 4 ออก ตารางระบุโดย TABLE_ID ทั้ง rowIndex และ columnIndex ภายใน cellLocation จะอิงตาม 0

ต่อไปนี้คือโปรโตคอลคำขอในการลบแถวหรือคอลัมน์ของตาราง

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "deleteTableRow": {
        "tableObjectId": TABLE_ID,
        "cellLocation": {
          "rowIndex": 5
        }
      }
    },
    {
      "deleteTableColumn": {
        "tableObjectId": TABLE_ID,
        "cellLocation": {
          "columnIndex": 3
        }
      }
    }
  ]
}

แก้ไขข้อมูลตาราง

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้เมธอด DeleteTextRequest เพื่อนำข้อความทั้งหมดในเซลล์ภายใน textRangeออก จากนั้นจะใช้วิธีการ InsertTextRequest เพื่อแทนที่ด้วยข้อความใหม่ของ "จิงโจ้"

ตารางจะระบุโดย TABLE_ID เซลล์ที่ได้รับผลกระทบอยู่ใน แถวที่ 5 และคอลัมน์ที่ 3 ทั้ง rowIndex และ columnIndex ภายใน cellLocation จะอิงตาม 0

ต่อไปนี้คือโปรโตคอลคำขอเพื่อแก้ไขข้อมูลตาราง

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "deleteText": {
        "objectId": TABLE_ID,
        "cellLocation": {
          "rowIndex": 4,
          "columnIndex": 2
        },
        "textRange": {
          "type": "ALL",
        }
      }
    },
    {
      "insertText": {
        "objectId": TABLE_ID,
        "cellLocation": {
          "rowIndex": 4,
          "columnIndex": 2
        },
        "text": "Kangaroo",
        "insertionIndex": 0
      }
    }
  ]
}

จัดรูปแบบแถวส่วนหัวของตาราง

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้เมธอด UpdateTableCellPropertiesRequest เพื่อจัดรูปแบบแถวส่วนหัวขององค์ประกอบตารางภายใน tableRange ที่ระบุโดย TABLE_ID จากนั้นจะใช้วิธี TableCellProperties เพื่อตั้งค่าสีพื้นหลังของแถวส่วนหัวเป็นสีดำ

คำขอถัดไปแต่ละรายการจะใช้วิธีการ UpdateTextStyleRequest เพื่อตั้งค่ารูปแบบข้อความในเซลล์หนึ่งของแถวส่วนหัวเป็นตัวหนาสีขาว ขนาด 18 พอยต์ แบบอักษร Cambria ภายใน textRange จากนั้นคุณต้องส่งคำขอนี้ซ้ำสำหรับแต่ละเซลล์เพิ่มเติมในส่วนหัว

ทั้ง rowIndex และ columnIndex ภายใน location และ cellLocation จะอิงตาม 0

ต่อไปนี้คือโปรโตคอลคำขอในการจัดรูปแบบแถวส่วนหัวของตาราง

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "updateTableCellProperties": {
        "objectId": TABLE_ID,
        "tableRange": {
          "location": {
            "rowIndex": 0,
            "columnIndex": 0
          },
          "rowSpan": 1,
          "columnSpan": 3
        },
        "tableCellProperties": {
          "tableCellBackgroundFill": {
            "solidFill": {
              "color": {
                "rgbColor": {
                  "red": 0.0,
                  "green": 0.0,
                  "blue": 0.0
                }
              }
            }
          }
        },
        "fields": "tableCellBackgroundFill.solidFill.color"
      }
    },
    {
      "updateTextStyle": {
        "objectId": TABLE_ID,
        "cellLocation": {
          "rowIndex": 0,
          "columnIndex": 0
        },
        "style": {
          "foregroundColor": {
            "opaqueColor": {
              "rgbColor": {
                "red": 1.0,
                "green": 1.0,
                "blue": 1.0
              }
            }
          },
          "bold": true,
          "fontFamily": "Cambria",
          "fontSize": {
            "magnitude": 18,
            "unit": "PT"
          }
        },
        "textRange": {
          "type": "ALL"
        },
        "fields": "foregroundColor,bold,fontFamily,fontSize"
      }
    },
    // Repeat the above request for each additional cell in the header row....
  ]
}

แถวส่วนหัวที่มีการจัดรูปแบบจะมีลักษณะดังนี้หลังจากอัปเดต

จัดรูปแบบผลลัพธ์ของสูตรแถวส่วนหัว

แทรกแถวหรือคอลัมน์ของตาราง

ตัวอย่างโค้ดต่อไปนี้ presentations.batchUpdate แสดงวิธีใช้เมธอด InsertTableRowsRequest เพื่อเพิ่ม 3 แถวใต้แถวที่ 6 จากนั้นจะใช้วิธี InsertTableColumnsRequest เพื่อเพิ่ม 2 คอลัมน์ทางด้านซ้ายของคอลัมน์ที่ 4 ในตารางเดียวกัน

ตารางจะระบุโดย TABLE_ID ทั้ง rowIndex และ columnIndex ภายใน cellLocation จะอิงตาม 0

ต่อไปนี้คือโปรโตคอลคำขอในการแทรกแถวหรือคอลัมน์ของตาราง

POST https://slides.googleapis.com/v1/presentations/PRESENTATION_ID:batchUpdate
 
{
  "requests": [
    {
      "insertTableRows": {
        "tableObjectId": TABLE_ID,
        "cellLocation": {
          "rowIndex": 5
        },
        "insertBelow": true,
        "number": 3
      }
    },
    {
      "insertTableColumns": {
        "tableObjectId": TABLE_ID,
        "cellLocation": {
          "columnIndex": 3
        },
        "insertRight": false,
        "number": 2
      }
    }
  ]
}