aspn~~(北京理工大學(xué)出版)-項(xiàng)目六xml、站點(diǎn)導(dǎo)航(編輯修改稿)
2025-03-13 12:03 本頁面
【文章內(nèi)容簡介】 “ ”頁面中添加 XmlDataSource控件，用鼠標(biāo)選擇 XmlDataSource控件后，選擇【配置數(shù)據(jù)源】選項(xiàng)，如 圖 615所示。 選擇【配置數(shù)據(jù)源】選項(xiàng)后，彈出【配置數(shù)據(jù)源】對話框，在數(shù)據(jù)文件輸入框內(nèi)選擇剛創(chuàng)建的 XML數(shù)據(jù)文件“ ”，如 圖 616所示，選擇數(shù)據(jù)文件完成后，單擊【確定】按鈕完成XmlDataSource數(shù)據(jù)源的配置。 （ 3） TreeView控件綁定 XmlDataSource數(shù)據(jù)源。在默認(rèn)頁面上，添加一個(gè) TreeView控件，用鼠標(biāo)選中此控件，單擊右上角的黑色箭頭按鈕，在彈出的對話框中，在【選擇數(shù)據(jù)源】的下拉列表框中選擇創(chuàng)建的 XmlDataSource的名稱“ XmlDataSource1”，如 圖 617所示。 下一頁 返回 上一頁 任務(wù)四 TreeView控件的使用 設(shè)置后， TreeView控件將顯示為如 圖 618所示的效果。 在默認(rèn)情況下，將 XML文檔中的所有元素顯示在 TreeView中，由于在 XML文件中通過 XML元素的屬性和內(nèi)容設(shè)置，所以必須對TreeView的綁定進(jìn)行設(shè)置。用鼠標(biāo)選中此控件，單擊右上角的黑色箭頭按鈕，在彈出的對話框中選擇【編輯 TreeNode數(shù)據(jù)綁定】選項(xiàng)。 選擇【編輯 TreeNode數(shù)據(jù)綁定】選項(xiàng)后，彈出【 TreeView DataBingding編輯器】對話框，選擇需要重新綁定的節(jié)點(diǎn)，單擊【添加】按鈕，此時(shí)可以配置節(jié)點(diǎn)的詳細(xì)信息。 下一頁 返回 上一頁 任務(wù)四 TreeView控件的使用 添加完數(shù)據(jù)綁定字段后，選中字段，此時(shí)將在右邊顯示數(shù)據(jù)綁定的屬性，一般情況下只需要設(shè)置“ TextField”屬性和“ ValueField”屬性，在設(shè)置的時(shí)候，可以選擇 XML元素的屬性或者元素的文本值。設(shè)置完成后，運(yùn)行程序后 TreeView控件將顯示為如 圖 621所示效果。 （ 4）定制 TreeView控件的圖標(biāo)。在默認(rèn)情況下， TreeView控件連接節(jié)點(diǎn)的圖標(biāo)是【 +】和【 】，也可以通過修改 TreeView的“ CollapseImageUrl”、“ ExpandImageUrl”和“ LeafNodeStyle”屬性，來修改連接節(jié)點(diǎn)的圖標(biāo)。 設(shè)置完成后，運(yùn)行程序效果如 圖 623所示。 TreeView控件包含的屬性見 表 65，這些屬性可以為控件的節(jié)點(diǎn)指定自己的圖像。 下一頁 返回 上一頁 任務(wù)四 TreeView控件的使用 【案例 2】 通過編程控制 TreeView控件的展開與折疊，具體效果如 圖 624所示。在以上的操作中，主要通過配置 XML數(shù)據(jù)源的方式來配置 TreeView控件，在實(shí)際應(yīng)用過程中，可能要通過程序代碼來控制。 【具體步驟】 （ 1）在默認(rèn)的 TreeView控件，修改相應(yīng)的屬性，一個(gè)按鈕實(shí)現(xiàn)展開 TreeView控件的所有節(jié)點(diǎn)，另外一個(gè)按鈕實(shí)現(xiàn)折疊 TreeView控件。在頁面的調(diào)入時(shí)間中添加代碼，實(shí)現(xiàn)建樹功能。 下一頁 返回 上一頁 任務(wù)四 TreeView控件的使用 （ 2）對指定節(jié)點(diǎn)進(jìn)行操作。在上面的操作中實(shí)現(xiàn)對 TreeView進(jìn)行折疊和展開，那么如何實(shí)現(xiàn)對指定節(jié)點(diǎn)進(jìn)行展開和折疊呢？可以通過 TreeView控件中有一個(gè) FindNode()方法來實(shí)現(xiàn)。程序運(yùn)行效果如 圖 625所示。 返回 上一頁 任務(wù)五 Menu控件的使用 【任務(wù)要點(diǎn)】 Menu控件 【案例 1】 制作某校園網(wǎng)站導(dǎo)航菜單，效果如 圖 626所示。 【具體步驟】 （ 1）創(chuàng)建菜單項(xiàng)。在頁面中添加一個(gè) Menu控件，通過右上角智能標(biāo)記菜單中選擇【編輯菜單項(xiàng)】選項(xiàng)，如 圖 627所示。選擇此菜單項(xiàng)后，彈出【菜單項(xiàng)編輯器】對話框，如 圖 628所示。 編輯完成后，在默認(rèn)情況下，菜單將顯示為如 圖 629所示的效果。 下一頁 返回 任務(wù)五 Menu控件的使用 （ 2）修改菜單項(xiàng)的樣式。 ①首先創(chuàng)建一個(gè)樣式文件“ ” 在頁面的前臺(tái) Html代碼中鏈接 ②創(chuàng)建 LevelMenuItemStyles。在樣式文件中主要定義了三個(gè)樣式，分別定義了第一層菜單項(xiàng)、第二層菜單項(xiàng)和鼠標(biāo)在菜單項(xiàng)上懸浮時(shí)的樣式。定義完樣式后，修改 Menu控件的“ LevelMenuItemStyles”屬性，如 圖 630所示。
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1