ต่อจาก บทที่ ๒๑

ในบทนี้จะพูดถึง QTableWidget ซึ่งเป็นพื้นที่สำหรับแสดงข้อมูลเป็นตาราง หรือนำ widget มาจัดวางเป็นตารางก็ได้




การสร้างและใส่ widget ลงในตาราง {QTableWidget .setCellWidget .setRowHeight .setColumnWidth}

QTableWidget นั้นจะคล้ายกับ QListWidget แต่ QListWidget จะนำข้อความมาจัดวางไล่เรียงเป็นแถวจากบนลงล่าง ส่วน QTableWidget จะเรียงเป็นตาราง คือเป็นสองมิติ มีทั้งแถวและคอลัมน์

นอกจากนี้แล้ว QTableWidget นั้นไม่ใช่ว่าใส่ได้แต่ข้อความ แต่ยังสามารถใส่ widget ต่างๆลงไปได้ด้วย

การสร้าง QTableWidget นั้นเริ่มจากกำหนดจำนวนแถวและคอลัมน์

QTableWidget(จำนวนแถว, จำนวนคอลัมน์)

ความสูงของแต่ละแถวนั้นกำหนดแยกกันโดยใช้เมธอด .setRowHeight

widget_ตาราง.setRowHeight(ลำดับแถว, ค่าความสูง)

ส่วนความกว้างของแต่ละคำลัมน์ใช้เมธอด .setColumnWidth

widget_ตาราง.setColumnWidth(ลำดับคอลัมน์, ค่าความกว้าง)

การใส่ widget ลงในตารางทำได้โดยใช้เมธอด .setCellWidget โดยกำหนดค่าแถวและคอลัมน์

widget_ตาราง.setCellWidget(ลำดับแถว, ลำดับคอลัมน์, ตัว_widget_ที่จะใส่)

ตัวอย่างเช่น ลองสร้าง QTableWidget ขนาด ๔ แถว ๓ คอลัมน์ขึ้นมาแล้วใส่ QPushButton ลงไปในแต่ละช่อง

import sys
from PyQt5.QtWidgets import QApplication,QMainWindow,QTableWidget,QPushButton

qAp = QApplication(sys.argv)
natang = QMainWindow()
natang.setStyleSheet('font-family: Courier New; font-size: 18px;')
natang.resize(400,300)
thaepsathana = natang.statusBar()

def kotlaeo(s): # ให้แสดงข้อความเมื่อกดปุ่ม
    def f():
        thaepsathana.showMessage('กด ('+s+')')
    return f

tarang = QTableWidget(4,3) # สร้างพื้นที่แสดงตาราง
natang.setCentralWidget(tarang)

tarang.setColumnWidth(2,150)
for j in range(4): # ไล่แต่ละแถว
    tarang.setRowHeight(j,50)
    for i in range(3): # ไล่แต่ละคอลัมน์
        s = '[%d,%d]'%(j,i)
        pum = QPushButton(s) # สร้างปุ่ม
        pum.setFixedSize(100,50) # ปรับขนาดปุ่ม
        tarang.setCellWidget(j,i,pum) # ใส่ปุ่มลงในช่อง
        pum.clicked.connect(kotlaeo(s))

natang.show()
qAp.exec_()

ก็จะได้ตารางที่มีปุ่มอยู่ในแต่ละช่องแบบนี้






การใส่ข้อมูลลงในตาราง และตั้งชื่อแถวและคอลัมน์ {.setItem QTableWidgetItem .item}

ในตัวอย่างที่แล้วได้แสดงให้เห็นว่าถ้าจะเอา widget ทั่วไปมาใส่ลงในตาราง QTableWidget ก็ทำได้ แต่โดยทั่วไปแล้ว widget ที่ปกติใช้ใส่ลงใน QTableWidget คือ QTableWidgetItem

QTableWidgetItem นั้นปกติจะใส่ข้อมูลตัวหนังสือ และสามารถพิมพ์แก้ได้ วิธีการใส่เข้าไปจะใช้เมธอด .setItem เช่นเดียวกับตอนใส่ QListWidgetItem ลงใน QListWidget แต่ว่าสำหรับ QTableWidget นั้นจะต้องสร้างออบเจ็กต์ QTableWidgetItem ขึ้นมาโดยตรง จะใส่แค่ข้อความไม่ได้

หากต้องการเอาออบเจ็กต์ QTableWidgetItem ในแถวหรือหลักที่ต้องการให้ใช้เมธอด .item ที่ตัว QTableWidget นั้น

ถ้าดับเบิลคลิกที่ QTableWidgetItem ก็จะสามารถพิมพ์แก้ข้อความในช่องนั้นๆได้ด้วย และแม้ว่าในช่องนั้นๆจะยังไม่ได้ใส่ QTableWidgetItem เข้าไปก็สามารถพิมพ์ข้อความเข้าไปได้ แล้ว QTableWidgetItem ที่ช่องนั้นก็จะถูกสร้างขึ้นมาเอง

ตัวอย่าง ลองสร้างตารางแล้วใส่รายชื่อโปเกมอนเข้าไป

import sys
from PyQt5.QtWidgets import QApplication,QTableWidget,QTableWidgetItem

qAp = QApplication(sys.argv)
tarang = QTableWidget(4,3) # สร้างตารางขนาด 4 แถว 3 คอลัมน์
tarang.setStyleSheet('font-size: 23px; font-family: Courier New;')
pkm = [ # รายชื่อโปเกมอน
    ['คิโมริ','จุปเทิล','จูไคน์'],
    ['อาชาโม','วากะชาโม','บาชาโม'],
    ['มิซึโงโรว','นุมาครอว์','ลากลาร์จ'],
    ['โปจิเอนา','กุราเอนา',''],
]
for i in range(3):
    tarang.setColumnWidth(i,75)
    for j in range(4):
        item = QTableWidgetItem(pkm[j][i]) # สร้างตัว QTableWidgetItem ขึ้นมา
        tarang.setItem(j,i,item) # ใส่ตัว QTableWidgetItem นั้นลงในแถวและคอลัมน์ที่กำหนด

print(tarang.item(4,3)) # ได้ None
print(tarang.item(1,2)) # ได้ <PyQt5.QtWidgets.QTableWidgetItem object at 0x000002BB258A61F0>
print(tarang.item(2,2).text()) # ได้ ลากลาร์จ
        
tarang.show()
qAp.exec_()

ก็จะได้ตารางแบบนี้ ซึ่งถ้าหากดับเบิลคลิกก็จะแก้ข้อความภายในนี้ได้ด้วย






การตั้งชื่อแถวและคอลัมน์ {.setVerticalHeaderLabels .setHorizontalHeaderLabels}

ชื่อแถวและคอลัมน์นั้นหากไม่ได้ตั้งอะไรก็จะเป็นเลข 1,2,3,... ดังที่เห็นในตัวอย่างที่ผ่านมา แต่ถ้าต้องการตั้งชื่อเองก็ทำได้โดยใช้เมธอด .setVerticalHeaderLabels .setHorizontalHeaderLabels โดยใส่ลิสต์ของชื่อแต่ละแถวหรือแต่ละคอลัมน์ลงไป ชื่อนั้นจะไปแสดงในตารางตามนั้น

ตัวอย่างเช่น ลองสร้างตารางใส่ข้อมูลโปเกมอน

import sys
from PyQt5.QtWidgets import QApplication,QMainWindow,QTableWidget,QTableWidgetItem

qAp = QApplication(sys.argv)
natang = QMainWindow()
natang.resize(450,150)
css = '''
    * {
        font-size: 16px;
        font-family: Tahoma;}
    QTableWidget {
        background-color: #edd;}
    QHeaderView:section {
        background-color: #dde;}'''
natang.setStyleSheet(css) # ปรับสีส่วนตารางแล้วก็ส่วนหัวแถวและคอลัมน์

tarang = QTableWidget(3,4) # สร้างตารางขนาด 3 แถว 4 คอลัมน์
natang.setCentralWidget(tarang) # ให้ตาราเป็น widget ในกลางของ QMainWindow
tarang.setVerticalHeaderLabels(['152','155','158']) # ชื่อแต่ละแถว
tarang.setHorizontalHeaderLabels(['ชื่อ','ชนิด','สูง','หนัก']) # ชื่อแต่ละคอลัมน์
lis_pokemon = [
    ['ชิโครีตา','พืช','0.9','6.4'],
    ['ฮิโนอาราชิ','ไฟ','0.5','7.9'],
    ['วานิโนโกะ','น้ำ','0.6','9.5'],
]
for j,pk in enumerate(lis_pokemon):
    for i,s in enumerate(pk):
        # สร้าง QTableWidgetItem ขึ้นมาใส่ลงในแถวและคอลัมน์ที่กำหนด
        tarang.setItem(j,i,QTableWidgetItem(s))

natang.show()
qAp.exec_()

ดูช่วงของช่องที่เลือกอยู่และตำแหน่งปัจจุบัน {.currentRow .currentColumn .selectedRanges}

แต่ละช่องในตาราง QTableWidget นั้นสามารถเอาเมาส์คลิกเพื่อเป็นการเลือกได้ และถ้าจะดูว่าแถวไหนคอลัมน์ไหนถูกเลือกอยู่ก็ทำได้โดยใช้เมธอด .currentRow .currentColumn

นอกจากนี้ถ้าใช้เมาส์ลากคลุมก็จะเลือกได้หลายช่องในเวลาเดียวกัน ซึ่งข้อมูลของส่วนที่ถูกเลือกนั้นจะเอาได้โดยใช้เมธอด .selectedRanges ซึ่งจะได้ออบเจ็กต์ QTableWidgetSelectionRange ซึ่งในนั้นเก็บข้อมูลว่าเราเลือกแถวไหนอยู่

ตัวอย่างเช่นสร้างตารางขึ้นมา พร้อมกับปุ่มที่กดแล้วให้พิมพ์ออกมาว่าตอนนี้เลือกช่องไหนอยู่ และเขียนลงบนหน้าต่างว่ากำลังลากคลุมส่วนไหนอยู่

import sys
from PyQt5.QtWidgets import QApplication,QWidget,QTableWidget,QPushButton,QLabel,QVBoxLayout

qAp = QApplication(sys.argv)
natang = QWidget()
natang.resize(400,400)
natang.setStyleSheet('font-size: 16px; font-family: Tahoma;')

vbl = QVBoxLayout()
natang.setLayout(vbl)

tarang = QTableWidget(4,3) # สร้างตาราง
vbl.addWidget(tarang)

khokhwam = QLabel('...\n...') # ส่วนข้อความที่จะแสดงตำแหน่งที่ถูกลากคลุมอยู่
vbl.addWidget(khokhwam)

def mueakot(): # เมื่อกดปุ่ม
    lis_chuanglueak = tarang.selectedRanges() # ดูว่าเลือกช่วงไหนอยู่
    if(lis_chuanglueak): # ถ้าเลือกอยู่จะมีออบเจ็กต์ QTableWidgetSelectionRange ตัวหนึ่งอยู่ภายในลิสต์
        chuanglueak = lis_chuanglueak[0]
        bon = chuanglueak.topRow() # ลำดับแถวบนสุดที่เลือกอยู่
        lang = chuanglueak.bottomRow() # ลำดับแถวล่างสุดที่เลือกอยู่
        sai = chuanglueak.leftColumn() # ลำดับคอลัมน์ซ้ายสุดที่เลือกอยู่
        khwa = chuanglueak.rightColumn() # ลำดับคอลัมน์ขวาสุดที่เลือกอยู่
        n_row = chuanglueak.rowCount() # จำนวนแถวที่เลือกอยู่
        n_col = chuanglueak.columnCount() # จำนวนคอลัมน์ที่เลือกอยู่
        # แสดงข้อมูลใน QLabel ภายในหน้าต่าง
        khokhwam.setText('บน: %d, ล่าง: %d, ซ้าย: %d, ขวา: %d\nครอบคลุม %d แถว × %d คอลัมน์'%(bon,lang,sai,khwa,n_row,n_col))

        # พิมพ์ข้อมูลช่องที่เลือกอยู่ล่าสุด
        yu_row = tarang.currentRow()
        yu_col = tarang.currentColumn()
        print('อยู่ที่แถวที่ %d คอลัมน์ที่ %d'%(yu_row,yu_col))

pumkot = QPushButton('ดูขอบเขตและตำแหน่งปัจจุบัน') # ปุ่มกด
vbl.addWidget(pumkot)
pumkot.clicked.connect(mueakot)

natang.show()
qAp.exec_()

ก็จะได้ตารางแบบนี้ออกมา ลองลากคลุมแล้วกดปุ่มดูผลที่ได้






การให้ทำคำสั่งเมื่อเปลี่ยนช่วงที่เลือก {.itemSelectionChanged}

หากมีฟังก์ชันที่ต้องการให้ทำงานเมื่อมีการเปลี่ยนช่วงที่เลือกคลุมอยู่ภายในตาราง ให้ตั้ง .connect ที่ .itemSelectionChanged

ตัวอย่างเช่น ลองทำให้เมื่อมีการเลือกก็ให้แสดงข้อความที่ด้านล่างบอกว่าเลือกอยู่กี่ช่อง

import sys
from PyQt5.QtWidgets import QApplication,QWidget,QTableWidget,QLabel,QVBoxLayout

qAp = QApplication(sys.argv)
natang = QWidget()
natang.resize(400,240)
natang.setStyleSheet('font-size: 19px; font-family: Tahoma;')

vbl = QVBoxLayout()
natang.setLayout(vbl)

tarang = QTableWidget(4,8)
for i in range(8):
    tarang.setColumnWidth(i,40)
vbl.addWidget(tarang)

khokhwam = QLabel('')
vbl.addWidget(khokhwam)

def mueaplian():
    lis_chuanglueak = tarang.selectedRanges()
    if(lis_chuanglueak):
        chuanglueak = lis_chuanglueak[0]
        n_row = chuanglueak.rowCount() # จำนวนแถวที่เลือกอยู่
        n_col = chuanglueak.columnCount() # จำนวนคอลัมน์ที่เลือกอยู่
        khokhwam.setText('เลือกอยู่ %d ช่อง'%(n_row*n_col)) # แสดงจำนวนช่องในข้อความด้านล่าง

tarang.itemSelectionChanged.connect(mueaplian)
natang.show()
qAp.exec_()

ได้ช่องตารางแบบนี้ออกมา ลองลากคลุมเพื่อดูความเปลี่ยนแปลงได้






การให้ทำคำสั่งเมื่อคลิกที่ช่อง {.cellPressed .cellClicked .cellDoubleClicked .itemPressed .itemClicked .itemDoubleClicked}

ถ้ามีฟังก์ชันที่ต้องการให้ทำเมื่อมีการคลิกที่ช่องให้ตั้ง .connect ที่ .cellPressed .cellClicked .cellDoubleClicked คล้ายกับกรณี QListWidgetItem

โดยค่าพารามิเตอร์ของฟังก์ชันนี้จะได้มา ๒ ตัวคือค่าลำดับแถวและคอลัมน์

ตัวอย่างเช่น

import sys
from PyQt5.QtWidgets import QApplication,QMainWindow,QWidget,QTableWidget,QLabel,QVBoxLayout

qAp = QApplication(sys.argv)
natang = QMainWindow()
natang.resize(440,300)
natang.setStyleSheet('* {font-size: 19px; font-family: Tahoma;} QHeaderView:section {background-color: #ade; color: #152;}')

suanlak = QWidget()
natang.setCentralWidget(suanlak)
thaep_sathana = natang.statusBar() # แถบสถานะด้านล่าง ซึ่งจะให้แสดงเมื่อถูกดับเบิลคลิก
thaep_sathana.setStyleSheet('background-color: #fe7; color: #903;')
vbl = QVBoxLayout()
suanlak.setLayout(vbl)

tarang = QTableWidget(6,13)
for i in range(13):
    tarang.setColumnWidth(i,30)
vbl.addWidget(tarang)

khokhwam = QLabel('') # ส่วนข้อความที่จะให้แสดงเมื่อถูกกดแล้วปล่อย
vbl.addWidget(khokhwam)

def thukkot(r,c):
    print('แถว %d คอลัมน์ %d ถูกกด'%(r,c))
def thukclick(r,c):
    khokhwam.setText('แถว %d คอลัมน์ %d ถูกกดแล้วปล่อย'%(r,c))
def thukdoubleclick(r,c):
    thaep_sathana.showMessage('แถว %d คอลัมน์ %d ถูกดับเบิลคลิก'%(r,c))
    
tarang.cellPressed.connect(thukkot)
tarang.cellClicked.connect(thukclick)
tarang.cellDoubleClicked.connect(thukdoubleclick)

natang.show()
qAp.exec_()

จะได้ตารางแบบนี้ ลองกดแต่ละช่องหรือลองดับเบิลคลิกแล้วดูความเปลี่ยนแปลงของข้อความที่ขึ้นมาได้



นอกจากนี้ยังมี .itemPressed .itemClicked .itemDoubleClicked ซึ่งจะคล้ายกับ แต่ผลที่ได้จะเป็นตัวออบเจ็กต์ช่องนั้น

ตัวอย่างเช่น ลองทำให้เมื่อถูกคลิกมีแล้วแสดงข้อความที่อยู่ในช่องนั้นออกมา

import sys
from PyQt5.QtWidgets import QApplication,QMainWindow,QTableWidget,QTableWidgetItem

qAp = QApplication(sys.argv)
natang = QMainWindow()
natang.setStyleSheet('* {font-size: 28px; font-family: Courier New; color: #150} QHeaderView:section {background-color: #cae; color: #621;}')
thaep_sathana = natang.statusBar() # แถบสถานะด้านล่าง

tarang = QTableWidget(4,5)
natang.setCentralWidget(tarang)
for i in range(5):
    tarang.setColumnWidth(i,45)
    for j in range(4):
        item = QTableWidgetItem('กขคฆงจฉชฌญตถทธนปผพภม'[i+j*5])
        tarang.setItem(j,i,item)

def thukclick(item):
    thaep_sathana.showMessage('%s ถูกคลิก'%(item.text()))
tarang.itemClicked.connect(thukclick)

natang.show()
qAp.exec_()

จะได้ตารางแบบนี้ พอคลิกช่องไหนแล้วอักษรในช่องนั้นก็จะปรากฏในแถบสถานะด้านล่าง






การให้ทำคำสั่งเมื่อช่องถูกแก้ {.cellChanged .itemChanged}

แต่ละช่องภายในตารางนั้นสามารถแก้ได้เมื่อดับเบิลคลิก หากต้องการให้เมื่อมีการใส่หรือเปลี่ยนข้อความแล้วมีการทำคำสั่งอะไรที่ต้องการก็อาจทำได้โดยตั้ง .connect ที่ .cellChanged หรือ .itemChanged

ตัวอย่างเช่นลองสร้างตาราง แล้วให้เวลาที่มีการแก้ข้อความมีการพิมพ์ตำแหน่งที่แก้และข้อความใหม่ที่ได้ออกมา

import sys
from PyQt5.QtWidgets import QApplication,QTableWidget

qAp = QApplication(sys.argv)
tarang = QTableWidget(5,3)
tarang.setStyleSheet('* {font-size: 20px; font-family: Courier New;} QTableWidget {background-color: #edf;} QHeaderView:section {background-color: #fed;}')

def kaelaeo(r,c):
    item = tarang.item(r,c) # เอาตัวออบเจ็กต์ในตำแหน่งนั้น
    print('แถว %d คอลัมน์ %d ถูกแก้เป็น "%s"'%(r,c,item.text()))
tarang.cellChanged.connect(kaelaeo)

tarang.show()
qAp.exec_()

ลองดับเบิลคลิกดูสักช่องแล้วใส่ข้อความเข้าไป แถวและคอลัมน์และข้อความที่ใส่ไปนั้นก็จะถูกพิมพ์ออกมา





อ่านบทถัดไป >> บทที่ ๒๓

~ 自己紹介 ~

目次

日本による名言集

python モジュール -- numpy -- matplotlib -- pandas -- manim -- opencv -- pyqt -- pytorch 機械学習 -- ニューラル      ネットワーク

javascript

モンゴル語

言語学

maya

確率論

日本での日記

中国での日記 -- 北京での日記 -- 香港での日記 -- 澳門での日記

台灣での日記

北欧での日記

他の国での日記

qiita

その他の記事

記事の類別

==เลือกหมวด== ดาราศาสตร์ คณิตศาสตร์ -ความน่าจะเป็น คอมพิวเตอร์ -เขียนโปรแกรม --python ---numpy ---scipy ---matplotlib ---pandas ---manim ---pyqt ---sklearn ---pytorch ---mayapython --ruby --javascript --dart --sql --regex --opencv -shell -3D --maya --MMD -microsoft_office -pdf -ปัญญาประดิษฐ์ --โครงข่ายประสาทเทียม -การสุ่ม ภาษาศาสตร์ -ตัวอักษร -เรียนภาษา -หลักเกณฑ์การทับศัพท์ -ภาษาจีน --ภาษาจีนกลาง -ภาษาญี่ปุ่น -ภาษามองโกล -ภาษาลาว -ภาษาเขมร ประวัติศาสตร์ -ประวัติศาสตร์จีน -ประวัติศาสตร์ญี่ปุ่น ปรัชญา บันทึก เรื่องแต่ง ประเทศจีน -จีนแผ่นดินใหญ่ --ปักกิ่ง --เทียนจิน --เหลียวหนิง --เหอเป่ย์ --เหอหนาน --ซานตง --ซานซี --อานฮุย --เจ้อเจียง --หูเป่ย์ --หูหนาน --ฝูเจี้ยน --กวางตุ้ง ---แต้จิ๋ว --ยูนนาน --ซินเจียง -ฮ่องกง -มาเก๊า -ไต้หวัน --ไทเป --จีหลง --เถาหยวน --ซินจู๋ --เหมียวลี่ --ไถจง --หยวินหลิน --เจียอี้ --ไถหนาน --เกาสยง --ผิงตง --อี๋หลาน ประเทศญี่ปุ่น -ฮกไกโด -อาโอโมริ -อิวาเตะ -มิยางิ -อากิตะ -ยามางาตะ -ฟุกุชิมะ -อิบารากิ -โทจิงิ -กุมมะ -ไซตามะ -จิบะ -โตเกียว -คานางาวะ -นีงาตะ -โทยามะ -อิชิกาวะ -ฟุกุอิ -ยามานาชิ -นางาโนะ -กิฟุ -ชิซึโอกะ -ไอจิ -มิเอะ -ชิงะ -เกียวโต -โอซากะ -เฮียวโงะ -นาระ -วากายามะ -โอกายามะ -ฮิโรชิมะ -ยามางุจิ -ฟุกุโอกะ ต่างแดน -อุษาคเนย์ --กัมพูชา --พม่า --สิงคโปร์ -ยุโรป --สวีเดน --เดนมาร์ก --ฟินแลนด์ ท่องเที่ยว -มหาวิทยาลัย -พิพิธภัณฑ์ --พิพิธภัณฑ์วิทยาศาสตร์ --หอศิลป์ -สวนสัตว์ --พิพิธภัณฑ์สัตว์น้ำ -ท้องฟ้าจำลอง -ตึกระฟ้า -ปราสาท☑ --ปราสาทญี่ปุ่น --ปราสาทขอม --ปราสาทยุโรป -ศาสนสถาน --วัด --ศาลเจ้า --โบสถ์ --มัสยิด -สุสาน -มรดกโลก -ทะเล -ทะเลสาบ -ภูเขา -หิมะ -ดอกซากุระ -แมว -รถไฟ -เรือ -ตลาดกลางคืน -งานเทศกาล -ที่ระลึกภัยพิบัติ -ตามรอย บันเทิง -เกม --อาเตอลีเย --โปเกมอน --caligula --vn -อนิเมะ -มังงะ -นิยาย -เพลง --เพลงอนิเมะ --เพลงเกม

　 記事を検索

　 最新記事

　 おすすめの記事

月別記事

もっと前の記事

ไทย

日本語

中文