ttk的treeview視窗元件提供了樹狀及多欄位的資料顯示功能，也就是說treeview可以讓我們做出類似檔案總管左邊的樹狀結構方塊，或是做出條列式的檔案清單方塊。在這一個章節，我們會簡單的介紹treeview最基本的使用方法，也就是建立平面式而且只有一個欄位的清單方塊，至於更進階的功能有機會的話會在以後的章節說明。

21.1 建立清單方塊

使用ttk的treeview建立平面式、單一欄位的清單方塊算是treeview最簡單的使用方法，請看下面的程式範例：



這個程式的第1行建立了一個treeview視窗元件，然後指定它的-show選項為tree，這樣會讓清單方塊上的標題列不要顯示出來。當然你想要顯示標題列的話，不指定-show選項就可以了。

接下來的2~3行使用了treeview的insert命令來把「項目1」及「項目2」插入清單方塊的尾巴(end)。請注意到insert後面的大括號，它可以用來指定新建立的項目要安插在哪一個已存在項目的下層(因為treeview可以允許你建立一個樹狀的清單方塊)，如果指定為 {} 就表示要把新建立的項目安插在root(根)項目之下。接下來的-text選項可以用來設定新建立項目的文字內容。當insert命令執行後它會回傳一個獨一無二的項目id，這個項目id可以用來識別這一個新建立的項目，往後我們可以靠這個id來刪除或取用對應的項目。它執行起來像這樣：

圖 21-1

□ 階層式的treeview

接下來讓我們稍微測試一下樹狀結構怎麼做：



請注意到第3~4行，在insert後面我指定要把項目安插在item1的下層，所以它顯示起來就變成了一棵樹：

圖 21-2

□ 掃描檔案清單

讓我們再來看一個比較實用的例子，這個例子可以掃描你選擇的資料夾，然後把MP3檔案全都加入清單方塊：



因為這個程式用到的都是以前說明過的命令，所以這邊就不多做解釋囉。它執行起來像這樣：

圖 21-3

□ 加入捲軸方塊

不知道你們執行時上面的程式有沒有發現一個小問題，就是MP3檔案的數量多到超出清單方塊的可視區域時，清單方塊不會自動跑出水平或垂直的「捲軸方塊」就像下面的圖一樣：

圖 21-4

事實上這是正常的啦!! 因為我們並沒有幫這個清單方塊加上「捲軸方塊」的視窗元件!! 請看下面的程式，它示範了捲軸方塊的使用方法：



哇~~這個程式變得有點長...。在說明之前讓我們來了解捲軸方塊的運作原理。重點有兩個 1.捲軸方塊在拉的時候，要讓程式知道哪一個視窗元件的可視區域(內容)要跟著捲動 2.視窗元件的可視區域在捲動時，也要通知對應的捲軸方塊跟著捲動。

ok!! 有了上面的觀念以後就可以看程式了，現在我們要開始處理的是重點1的部份。請先看到第10~11行，我們用::ttk::scrollbar來建立捲軸方塊，它的-orient可以用來決定捲軸方塊的類型，horizontal表示採用水平顯示，vertical表示採用垂直顯示。然後兩個捲動方塊的-command可以用來設定「哪一個視窗元件的可視區域要跟著自己捲動」，其中「list $tree xview」表示$tree這個視窗元件的x軸要跟著捲動，而「list $tree yview」表示$tree這個視窗元件的y軸要跟著捲動。

接下來要處理重點2的部份了。請看到12~13行，treeview的-yscrollcommand選項可以用來設定treeview的y軸可視區域變動時，那一個捲動方塊要跟著捲動，其中「list $sv set」表示$sv這個捲軸方塊要跟著捲動。當然-xscrollcommand也是採用相同的原理。所以這個程式執行起來就會像下面一樣：

圖 21-5

清單方塊的內容超出可視區域時，xy的捲軸方塊會發揮功用了。

21.2 刪除項目

前一個小節的內容我們使用了treeview的insert命令來建立新的項目，而且也說了insert命令在執行後會回傳一個獨一無二的id，現在我們要來使用這個id了。treeview的delete可以用來刪除一票的項目，刪除一個項目的方法像這樣：



請注意到第4行，我用delete把清單方塊中的「項目1」刪掉了，所以執行上面的程式時只有「項目2」會顯示在清單方塊上。

□ 一次刪除多個項目

如果你想要一次刪多個項目的話可以這樣做：



上面的例子我一次刪掉了2個項目，當然你可以一次刪掉更多的項目，只要把它們都接在delete後的清單就可以了。

□ 清空清單方塊

如果你想要一次把所有的項目都清掉的話，可以使用下面的程式範例：



請注意到第4行，treeview的children可以用清單的方式取得某個項目下層的「子項目」，在這個例子裡我把root(根)項目之下的所有子項目都取出來然後刪除它們，當然這樣的結果就會把清單方塊上的所有項目都刪掉。

21.3 查詢及設定項目資訊

treeview的item命令，可以用來查詢或是設定已建立項目的資訊。例如你想要修改項目的文字內容可以這樣做：



注意到程式的第4行，我透過了treeview的item命令來重新設定$item1的文字內容為「項目A」。

上面示範了設定的用法，如果是查詢的話就更簡單了，只要使用下面的程式片段就可以了：



上面的一行程式可以輸出$item1上的文字內容。

21.4 選取控制

treeview也可以允許我們透過程式去查詢目前清單方塊上已選取(反白)的項目，或是把某些項目設定為已選取，選取項目的範例如下：



這個程式的重點在第6行，treeview的selection命令可以用來取出清單方塊上已選取的項目的id清單。在預設的情況下treeview是採用多選模式的，也就是說你可以配合的shift及ctrl鍵來選取多個項目。如果想要改成單選模式的話，可以在建立treeview視窗元件時指定-selectmode選項，指定為extended表示為多選模式，指定為browse表示使用單選模式。例如：

□ 設定選取狀態

treeview提供了多種方法讓我們使用程式來改變清單方塊中項目的選取狀態，現在讓我們先看看如何選取清單中的項目：



請注意到程式的第5行，treeview的selection set命令可以用來切換選取的項目，selection set可以接受一個項目id的清單，只要是包含在這個清單上的項目都會被設定為選取狀態，其它不包含在內的項目則會被設定為未選取。這個例子中設定了「項目1」及「項目3」，所以它執行起來像這個樣子：

圖 21-6

上面的selection set可用來切換選取的項目群，但有些時候我們也會想要用「添加」的方式來選取項目，也就是在不清除目前選取的項目狀況下加入新的選取項目。這樣子的功能可以使用treeview的selection add命令來完成，例如：



注意到程式的第6行，我用添加的方式把「項目2」也一併選取了，所以現在所有的項目都是處於選取中的狀態。如下圖：

圖 21-7

□ 移除選取狀態

除了可以設定項目變成選取狀態外，當然也有對應的移除選取狀態的功能，使用selection remove即可以移除特定項目群的選取狀態，例如：



$items 是一個項目id的清單，凡是包含在內的項目，都會被設為未選取。

□ 切換選取狀態

treeview也提供了方便的selection toggle命令讓你可以切換特定項目群的狀態，例如：



$items 是一個項目id的清單，凡是包含在內的項目，都會被改變狀態，也就是選取的變未選取，末選取的變選取。