Study to be alive

本篇文章的TreeView是將TreeNode的ShowCheckBox設為true，原因是該TreeView同時會做單選及複選使用

要完成單選的TreeView主要有幾個要點:

1.將點選的節點記錄下來(例如將value記錄在隱藏欄位)

2.在每個節點(treenode)註冊javascript方法，當觸發click事件時將原來選擇的節點狀態清除

我們先看後端程式:重點是將TreeNode的ID包在span內，這麼做的目的是若直接指定TreeNode的value，在產生為html tag時value會被加料所以改取span的ID

後端程式
01 private void AddChildTreeNode(ref TreeNode objChildNode,string orgNO)
02         ...{
03             //取回子節點選項            
04             var childNodes = this.GetChildNodes(orgNO);
05             
06             foreach (var childNode in childNodes)
07             ...{
08                 var trNood = new TreeNode();
09                 trNood.ShowCheckBox = true;
10
11                 if (selectedID.Any(o => o.Contains(childNode.PKOrg)))
12                     trNood.Checked = true;
13                 trNood.SelectAction = TreeNodeSelectAction.Expand;
14                 trNood.Expanded = false;
15                 trNood.Text = string.Format(@"<span id=""sp_...{0}"" >{1}, childNode.PKOrg, childNode.LocalizedName);  
16                 trNood.Value = childNode.PKOrg;
17                 this.AddChildTreeNode(ref trNood, childNode.OrgNo);
18                 objChildNode.ChildNodes.Add(trNood);
19             }</span>"
20         }

接下來是前端程式:

前端程式
01 $(document).ready(function() {
02         SetTreeNodeCheckEvent();
03         LoadEvent();
04     });
05
06
07     //MultipleChoice是英文單選的意思
08     function MultipleChoice(id, name) ...{
09         if ($('#h_id').val() != '' && $('#h_id').val() != id)
10             $('#' + $('#h_id').val()).attr("checked", false);  
11         
12         SingleAndReturn(id, name);
13     }
14
15     function SetTreeNodeCheckEvent() ...{
16         $(".TreeView tr").each(function() ...{
17             if ($("span", this).get().length > 0) ...{
18                 var id = $("span", this).get()[0].id;
19                 var name = $("span", this).text();
20                 id = id.replace('sp_', '');
21                 $("input:checkbox", this).each(function() ...{                    
22                     $(this).get()[0].id = id;
23                     $(this).click(function() ...{ MultipleChoice(id, name); });                    
24                 });
25             }
26         });
27     }
28
29     //點選TreeNode並移至TreeNode位置
30     function LoadEvent() ...{
31         try ...{
32             var elem = document.getElementById('TreeViewItems_SelectedNode');
33             if (elem != null) ...{
34                 var node = document.getElementById(elem.value);
35                 if (node != null) ...{
36                     node.scrollIntoView(true);
37                 }
38             }
39         }
40         catch (oException)
41         ...{ }
42     }  // -->