TreeView Dengan Kotak Centang dan Tombol Radio

Komponen TTreeView Delphi (terletak pada tab palet komponen "Win32") mewakili jendela yang menampilkan a daftar item hirarkis, seperti judul dalam dokumen, entri dalam indeks, atau file dan direktori di sebuah disk.

TTreeview Delphi secara bawaan tidak mendukung kotak centang tetapi kontrol WC_TREEVIEW yang mendasarinya tidak. Anda dapat menambahkan kotak centang ke treeview dengan menimpa prosedur CreateParams dari TTreeView, menentukan gaya TVS_CHECKBOXES untuk kontrol. Hasilnya semua node di treeview akan memiliki kotak centang yang menyertainya. Selain itu, properti StateImages tidak dapat digunakan lagi karena WC_TREEVIEW menggunakan imagelist ini secara internal untuk mengimplementasikan kotak centang. Jika Anda ingin mengaktifkan kotak centang, Anda harus melakukannya menggunakan Mengirim pesan atau Macro TreeView_SetItem / TreeView_GetItem dari CommCtrl.pas. WC_TREEVIEW hanya mendukung kotak centang, bukan tombol radio.

Pendekatan yang Anda temukan dalam artikel ini jauh lebih fleksibel: Anda dapat memiliki kotak centang dan tombol radio dicampur dengan node lain dengan cara apa pun yang Anda suka tanpa mengubah TTreeview atau membuat yang baru

Bertentangan dengan apa yang Anda yakini, ini cukup sederhana untuk dicapai Delphi. Berikut langkah-langkah untuk membuatnya bekerja:

1. Menyiapkan daftar gambar (komponen TImageList pada tab palet komponen "Win32") untuk TTreeview. Properti StateImages berisi gambar untuk keadaan dicentang dan tidak dicentang untuk kotak centang dan / atau tombol radio.
2. Panggil prosedur ToggleTreeViewCheckBoxes (lihat di bawah) di acara OnClick dan OnKeyDown dari treeview. Prosedur ToggleTreeViewCheckBoxes mengubah StateIndex dari simpul yang dipilih untuk mencerminkan keadaan yang dicentang / tidak dicentang saat ini.

Untuk menjadikan treeview Anda lebih profesional, Anda harus memeriksa di mana sebuah node diklik sebelum mengaktifkan stateimages: dengan hanya mengaktifkan simpul saat gambar sebenarnya diklik, pengguna Anda masih dapat memilih simpul tanpa mengubah nya negara.

Selain itu, jika Anda tidak ingin pengguna Anda memperluas / menutup treeview, panggil prosedur FullExpand di formulir OnShow event dan atur AllowCollapse ke false di event OnCollapsing treeview itu.

Inilah implementasi prosedur ToggleTreeViewCheckBoxes:

prosedur ToggleTreeViewCheckBoxes (
Node: TTreeNode; 
cUnChecked, 
c Diperiksa, 
cRadioUnchecked, 
cRadioChecked: integer);
var
tmp: TTreeNode;
mulai jika Ditugaskan (Node) thenbeginif Node. StateIndex = cUnChecked kemudian
Node. StateIndex: = cChecked
lainjika Node. StateIndex = cChecked kemudian
Node. StateIndex: = cUnChecked
lain jika Node. StateIndex = cRadioUnChecked maka mulailah
tmp: = Node. Induk;
jika tidak Ditugaskan (tmp) kemudian
tmp: = TTreeView (Node. TreeView) .Items.getFirstNode
lain
tmp: = tmp.getFirstChild;
sementara Ditugaskan (tmp) dobeginif (tmp. StateIndex di
[cRadioUnChecked, cRadioChecked]) kemudian
tmp. StateIndex: = cRadioUnChecked;
tmp: = tmp.getNextSibling;
akhir;
Node. StateIndex: = cRadioChecked;
akhir; // jika StateIndex = cRadioUnCheckedakhir; // jika Ditugaskan (Node)
akhir; (* ToggleTreeViewCheckBoxes *)

Seperti yang dapat Anda lihat dari kode di atas, prosedur dimulai dengan menemukan setiap kotak centang dan hanya mengaktifkan atau menonaktifkannya. Selanjutnya, jika node adalah tombol radio yang tidak dicentang, prosedur berpindah ke node pertama pada level saat ini, menetapkan semua node pada tingkat itu untuk cRadioUnchecked (jika mereka cRadioUnChecked atau cRadioChecked node) dan akhirnya matikan Node ke cRadioChecked.

Perhatikan bagaimana tombol radio yang sudah diperiksa diabaikan. Jelas, ini karena tombol radio yang sudah dicentang akan beralih ke tidak dicentang, meninggalkan node dalam keadaan tidak terdefinisi. Hampir tidak seperti apa yang paling Anda inginkan.

Berikut ini cara membuat kode lebih profesional: di acara OnClick dari Treeview, tulis kode berikut untuk hanya mengaktifkan checkbox jika stateimage diklik (konstanta cFlatUnCheck, cFlatChecked dll didefinisikan di tempat lain sebagai indeks ke StateImages daftar gambar):

prosedur TForm1.TreeView1Click (Pengirim: TObject);
var
P: TPoint;
mulai
GetCursorPos (P);
P: = TreeView1.ScreenToClient (P);
jika (htOnStateIcon di
TreeView1.GetHitTestInfoAt (P.X, P.Y)) kemudian
ToggleTreeViewCheckBoxes (
TreeView1. Terpilih,
cFlatUnCheck,
cFlatPeriksa,
cFlatRadioUnCheck,
cFlatRadioChecked);
akhir; (* TreeView1Klik *)

Kode mendapatkan posisi mouse saat ini, mengonversi ke koordinat tampilan pohon dan memeriksa apakah StateIcon diklik dengan memanggil fungsi GetHitTestInfoAt. Jika ya, prosedur beralih disebut.

Sebagian besar, Anda akan mengharapkan bilah spasi untuk mengaktifkan kotak centang atau tombol radio, jadi inilah cara menulis acara TreeView OnKeyDown menggunakan standar itu:

prosedur TForm1.TreeView1KeyDown (
Pengirim: TObject; 
var Key: Word; 
Shift: TShiftState);
mulai jika (Kunci = VK_SPACE) dan
Ditugaskan (TreeView1. Terpilih) kemudian
ToggleTreeViewCheckBoxes (
TreeView1. Terpilih,
cFlatUnCheck,
cFlatPeriksa,
cFlatRadioUnCheck,
cFlatRadioChecked);
akhir; (* TreeView1KeyDown *)

Akhirnya, inilah bagaimana acara OnShow dan Treeview's OnChanging formulir bisa terlihat seperti jika Anda ingin mencegah keruntuhan node treeview:

prosedur TForm1.FormCreate (Pengirim: TObject);
mulai
TreeView1.FullExpand;
akhir; (* FormCreate *)
prosedur TForm1.TreeView1Collapsing (
Pengirim: TObject; 
Node: TTreeNode; 
var AllowCollapse: Boolean);
mulai
AllowCollapse: = false;
akhir; (* TreeView1Collapsing *)

Akhirnya, untuk memeriksa apakah suatu node dicentang, Anda cukup melakukan perbandingan berikut (dalam event handler OnClick Button, misalnya):

prosedur TForm1.Button1Click (Pengirim: TObject);
var
BoolResult: boolean;
tn: TTreeNode;
mulai jika Ditugaskan (TreeView1. Terpilih) maka mulailah
tn: = TreeView1. Terpilih;
BoolResult: = tn. StateIndex di
[cFlatChecked, cFlatRadioChecked];
Memo1.Text: = tn. Teks + 
#13#10 + 
'Dipilih:' + 
BoolToStr (BoolResult, True);
akhir;
akhir; (* Tombol1Klik *)

Meskipun jenis pengkodean ini tidak dapat dianggap sebagai mission-critical, ini dapat memberikan aplikasi Anda tampilan yang lebih profesional dan lebih halus. Selain itu, dengan menggunakan kotak centang dan tombol radio dengan bijaksana, mereka dapat membuat aplikasi Anda lebih mudah digunakan. Mereka pasti akan terlihat bagus!

Gambar di bawah ini diambil dari aplikasi uji menggunakan kode yang dijelaskan dalam artikel ini. Seperti yang Anda lihat, Anda dapat dengan bebas mencampur simpul yang memiliki kotak centang atau tombol radio dengan yang tidak memilikinya, meskipun Anda tidak boleh mencampur simpul "kosong" dengan "kotak centang"Node (lihat tombol radio di gambar) karena ini membuat sangat sulit untuk melihat apa yang terkait dengan nodes.