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

Google Slides 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ออก It จากนั้นจะใช้วิธี InsertTextRequest เพื่อแทนที่ด้วยข้อความใหม่ "Kangaroo"

โดยตารางจะระบุด้วย 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
      }
    }
  ]
}