Asp.net TreeView 를 통 해 사용자 가 선택 한 입력 방법 을 구축 하 는 것 을 추천 합 니 다.

일반적인 단일 데이터 선택 은 Dropdown List 컨트롤 을 사용 하여 이 루어 질 수 있 지만 여러 개의 선택 적 입력 이 있 고 차원 관계 가 있 는 내용 을 입력 할 때 TreeView 컨트롤 을 선택 하 는 것 이 좋 습 니 다.
본 고 는 TreeView 컨트롤 을 사용 하여 사용자 의 입력 을 효과적으로 얻 는 방법 을 소개 한다.그 중에서 TreeView 컨트롤 의 등급 선택,노드 HTML 링크 를 제거 하고 디 렉 터 리 를 전개 하 며 선택 내용 을 얻 고 데이터 베 이 스 를 어떻게 구성 하 는 지,데이터 베 이 스 를 어떻게 구성 하 는 지,팝 업 창 사용 등 지식 점 과 관련된다.본 고 는 응용 등급 의 예 를 입력 하여 기 호 를 하고 자신 에 대한 사람 을 만 들 고자 한다.다 좋 은 거 야!^ ^
본 논문 의 경영 범 위 는 분류 와 상세 한 하위 내용 을 입력 할 수 있 는 것 으로 내용 이 많 고 일정한 차원 관 계 를 가지 기 때문에 Dropdown List 와 Checkbox List 컨트롤 을 사용 하기에 적합 하지 않 기 때문에 CheckBox 속성 을 가 진 TreeView 컨트롤 을 사용 하여 사용자 의 입력 을 보조 합 니 다.
입력 인 터 페 이 스 는 대체로 다음 과 같 습 니 다.사용 자 는 선택 단 추 를 통 해 팝 업 대화 상 자 를 터치 하고 대화 상자 에 TreeView 컨트롤 을 설치 합 니 다.

팝 업 대화 상자 에 놓 인 TreeView 컨트롤 은 CheckBox 가 있어 서 사용자 가 선택 할 수 있 고 직렬 연결(Javascript 을 통 해 이 루어 지 며 Post 리 턴 을 줄 입 니 다)이 있 습 니 다.또한 내용 이 많 기 때문에 저 는 전개 하 는 단계 단 계 를 설정 하 였 습 니 다.

 
사용 자 는 큰 종 류 를 선택 하거나 반대로 선택 하면 목록 아래 의 모든 항목 을 선택 하거나 반대로 선택 할 수 있 고 하위 항목 을 따로 선택 할 수 있 습 니 다.
 
 
자바 script 을 통 해 되 돌아 오 는 내용 을 가 져 오고 조립 하기 가 쉽 지 않 기 때문에 본 고 는 배경 에 트 리 를 옮 겨 다 니 는 방식 으로 되 돌아 오 는 값 을 처리 한 다음 부모 창의 자바 script 에서 되 돌아 오 는 값 을 연결 하여 인터페이스 컨트롤 에 지정 한 형식의 내용 을 표시 할 수 있 도록 합 니 다.
 
 
다음은 HTML 코드 입 니 다.그 중에서 OnTreeNode Checked 는 직렬 자바 script 함수 이 고 SubmitValue 는 반환 값 을 연결 하 는 작업 입 니 다.코드

 
<div class="search"> 
<span> 
<asp:ImageButton ID="btnSelect" runat="server" 
ImageUrl="~/Themes/Default/btn_select.gif" onclick="btnSelect_Click" 
/> 
<asp:ImageButton ID="btnClose" runat="server" OnClientClick="javascript:window.close();return false;" 
ImageUrl="~/Themes/Default/btn_close.gif" /> 
</span> 
<table cellspacing="0" cellpadding="0" border="0" width="100%"> 
<tr> 
<td class="ico"> 
&nbsp; 
</td> 
<td class="form"> 
<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> 
<script language='javascript' type='text/javascript'> 
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; 
} 
} 
} 
function SubmitValue() { 
var val = ""; 
var returnVal = new Array(); 
var inputs = document.all.tags("INPUT"); 
var n = 0; 
for (var i = 0; i < inputs.length; i++) //          input 
{ 
if (inputs[i].type == "checkbox") { 
if (inputs[i].checked) { 
var strValue = inputs[i].value; 
val += strValue + ','; 
//returnVal[n] = val; 
n = n + 1; 
} 
} //if(inputs[i].type="checkbox") 
} //for 
window.returnValue = val; 
window.close(); 
} 
</script> 

아래 코드 는 페이지 의 배경 코드 입 니 다.그 중에서 트 리 에 대해 데이터 바 인 딩 을 하 는 방법 을 보 여 주 었 습 니 다.그 중에서 AddTreeNode 는 재 귀 함수 입 니 다.btnSelect_Click 이벤트 처리 함수,되 돌아 오 는 데 이 터 를 조립 하여 클 라 이언 트 의 컨트롤 입력 에 일정한 형식 으로 표시 합 니 다.코드

 
protected void Page_Load(object sender, EventArgs e) 
{ 
if (!this.IsPostBack) 
{ 
BindData(); 
} 
} 
private void BindData() 
{ 
ArrayList scopeTree = BLLFactory<BusinessScope>.Instance.GetTree(); 
foreach (BusinessScopeNodeInfo nodeInfo in scopeTree) 
{ 
TreeNode node = new TreeNode(nodeInfo.Name); 
node.SelectAction = TreeNodeSelectAction.Expand; 
this.TreeView1.Nodes.Add(node); 
AddTreeNode(node, nodeInfo); 
} 
} 
private void AddTreeNode(TreeNode parentNode, BusinessScopeNodeInfo nodeInfo) 
{ 
TreeNode treeNode = null; 
foreach (BusinessScopeNodeInfo subNodeInfo in nodeInfo.Children) 
{ 
treeNode = new TreeNode(subNodeInfo.Name); 
treeNode.SelectAction = TreeNodeSelectAction.Expand; 
parentNode.ChildNodes.Add(treeNode); 
AddTreeNode(treeNode, subNodeInfo); 
} 
} 
protected void btnSelect_Click(object sender, ImageClickEventArgs e) 
{ 
string result = ""; 
foreach (TreeNode parent in this.TreeView1.Nodes) 
{ 
foreach (TreeNode node in parent.ChildNodes) 
{ 
StringBuilder sb = new StringBuilder(); 
foreach (TreeNode subNode in node.ChildNodes) 
{ 
if (subNode.Checked) 
{ 
sb.AppendFormat("{0},", subNode.Text); 
} 
} 
if (sb.Length > 0) 
{ 
sb.Insert(0, string.Format("{0}(", node.Text)); 
sb.Append(")"); 
result += sb.ToString().Replace(",)", ")") + ";"; 
} 
else if (node.Checked) 
{ 
result += node.Text; 
} 
} 
} 
Helper.CloseWin(this, result.Trim(';')); 
} 

그 중의 데이터 조립 도 주의해 야 할 부분 입 니 다.효율 을 높이 고 데이터 베 이 스 를 자주 찾 지 않도록 조건 에 맞 는 데 이 터 를 DataTable 에 넣 은 다음 에 대상 의 Select 를 통 해 메모리 에서 찾 으 면 배 송 함수 의 검색 효율 을 잘 향상 시 킬 수 있 습 니 다.코드

 
/// <summary> 
///       
/// </summary> 
/// <returns></returns> 
public ArrayList GetTree() 
{ 
ArrayList arrReturn = new ArrayList(); 
string sql = string.Format("Select * From {0} Order By PID, Seq ", tableName); 
Database db = DatabaseFactory.CreateDatabase(); 
DbCommand cmdWrapper = db.GetSqlStringCommand(sql); 
DataSet ds = db.ExecuteDataSet(cmdWrapper); 
if (ds.Tables.Count > 0) 
{ 
DataTable dt = ds.Tables[0]; 
DataRow[] dataRows = dt.Select(string.Format(" PID = {0}", -1)); 
for (int i = 0; i < dataRows.Length; i++) 
{ 
int id = Convert.ToInt32(dataRows[i]["ID"]); 
BusinessScopeNodeInfo menuNodeInfo = GetNode(id, dt); 
arrReturn.Add(menuNodeInfo); 
} 
} 
return arrReturn; 
} 
private BusinessScopeNodeInfo GetNode(int id, DataTable dt) 
{ 
BusinessScopeInfo menuInfo = this.FindByID(id); 
BusinessScopeNodeInfo menuNodeInfo = new BusinessScopeNodeInfo(menuInfo); 
DataRow[] dChildRows = dt.Select(string.Format(" PID={0}", id)); 
for (int i = 0; i < dChildRows.Length; i++) 
{ 
int childId = Convert.ToInt32(dChildRows[i]["ID"]); 
BusinessScopeNodeInfo childNodeInfo = GetNode(childId, dt); 
menuNodeInfo.Children.Add(childNodeInfo); 
} 
return menuNodeInfo; 
} 

그 중에서 사용 하 는 데이터 실 체 는 다음 과 같은 두 가지 유형 과 같다.그 중에서 Business Scope Node Info 는 대상 Business Scope Info 의 진일보 한 포장 으로 나무의 기본 정 보 를 제공 하 는 데 편리 하 다.즉,Business Scope Node Info 는 하위 데 이 터 를 포함 하 는 대상 이 고 Business Scope Info 는 데이터 베이스 대상 의 매 핑 실체 일 뿐이다.코드

 
/// <summary> 
/// BusinessScopeNodeInfo      。 
/// </summary> 
public class BusinessScopeNodeInfo : BusinessScopeInfo 
{ 
private ArrayList m_Children = new ArrayList(); 
/// <summary> 
///            
/// </summary> 
public ArrayList Children 
{ 
get { return m_Children; } 
set { m_Children = value; } 
} 
public BusinessScopeNodeInfo() 
{ 
this.m_Children = new ArrayList(); 
} 
public BusinessScopeNodeInfo(BusinessScopeInfo scopeInfo) 
{ 
base.Id = scopeInfo.Id; 
base.Name = scopeInfo.Name; 
base.Seq = scopeInfo.Seq; 
} 
} 

코드

 
[Serializable] 
public class BusinessScopeInfo : BaseEntity 
{ 
#region Field Members 
private decimal m_Id = 0; 
private decimal m_Pid = -1; 
private string m_Name = ""; 
private string m_Seq = ""; 
#endregion 
#region Property Members 
public virtual decimal Id 
{ 
get 
{ 
return this.m_Id; 
} 
set 
{ 
this.m_Id = value; 
} 
} 
public virtual decimal Pid 
{ 
get 
{ 
return this.m_Pid; 
} 
set 
{ 
this.m_Pid = value; 
} 
} 
public virtual string Name 
{ 
get 
{ 
return this.m_Name; 
} 
set 
{ 
this.m_Name = value; 
} 
} 
public virtual string Seq 
{ 
get 
{ 
return this.m_Seq; 
} 
set 
{ 
this.m_Seq = value; 
} 
} 
#endregion 
} 

그 중의 데이터 형식 은 대체적으로 다음 과 같다주요 연구 기술:코드 생 성 도구,Visio 2 차 개발 전재 출처:작성 자:우 화 총