使用Asp.net的TreeView来构建用户选择输入

　　选择优于输入，这是一般人的共识，面对繁多的数据，提供良好的选择界面，一方面增强用户的界面体验，一方面也提高了数据的准确性，更节省了用户的宝贵时间。一般的单项数据选择可以使用DropdownList控件来实现，但对于有多个选择性输入，而且输入有层次关系的内容，最好选择TreeView控件来实现。

　　本文介绍如何使用使用TreeView控件来有效获取用户的输入，其中涉及到TreeView控件的级联选择、去掉节点HTML链接变为展开目录、获取选择内容、如何构造数据库的信息变为树形内容以及弹出窗口使用等知识点，本文输入应用级别的例子，希望能做个记号，对己对人，皆为利好!^_^

　　本文的经营范围是一个可以输入分类及详细子内容的，由于内容繁多，而且具有一定的层次关系，因此，不适合采用DropdownList和CheckboxList控件，因此采用了带CheckBox属性的TreeView控件来辅助用户的输入。

　　输入界面大致如下所示，用户通过选择按钮，触发弹出对话框，在对话框中放置了TreeView控件。

　　在弹出的对话框中，放置的TreeView控件，一个带有CheckBox，可以方便用户选择，并且具有级联（通过Javascript实现，减少Post回发），另外由于内容比较多，我设置了展开的级别层次。

　　用户通过选择或者反选大类，可以选择或反选其列表下面的所有项目，也可以单独选择子项目。

　　由于通过Javascript不太好获取并组装返回的内容，本文通过了在后台遍历树的方式对返回值进行处理，然后在父窗体的Javascript中对返回值进行了绑定，使其在界面控件中得以显示指定格式的内容。

　　以下为HTML的代码，其中OnTreeNodeChecked为级联Javascript函数，SubmitValue为对返回值进行绑定的操作。

　　代码

　　<span>

　　<asp:ImageButton ID="btnSelect" runat="server"

　　ImageUrl="~/Themes/Default/btn_select.gif?http://www.xvna.com" onclick="btnSelect_Click"

　　/>

　　<asp:ImageButton ID="btnClose" runat="server" OnClientClick="javascript:window.close();return false;"

　　ImageUrl="~/Themes/Default/btn_close.gif?http://www.xvna.com" />

　　</span>

　　<tr>

　　</td>

　　<asp:TreeView ID="TreeView1" runat="server" onclick="OnTreeNodeChecked();" ShowCheckBoxes="All"

　　ShowLines="True" ExpandDepth="1" Font-Bold="False" ForeColor="#0000CC">

　　</asp:TreeView>

　　</td>

　　</tr>

　　</table>

　　</div>

　　function OnTreeNodeChecked() {

　　var ele = event.srcElement;

　　if (ele.type == 'checkbox') {

　　var childrenDivID = ele.id.replace('CheckBox', 'Nodes');

　　var div = document.getElementById(childrenDivID);

　　if (div == null) return;

　　var checkBoxs = div.getElementsByTagName('INPUT');

　　for (var i = 0; i < checkBoxs.length; i++) {

　　if (checkBoxs[i].type == 'checkbox')

　　checkBoxs[i].checked = ele.checked;

　　}