js 작업 보조 연결 구현 code_javascript 기술-JS 튜토리얼-php.cn

js 작업 보조 연결 구현 code_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:22:19

원래의

1092명이 탐색했습니다.

테이블 구조
2차 또는 다단계 연계는 주로 데이터베이스에 상위 번호가 있는 테이블을 기반으로 하며, 이것도 예외는 아닙니다.
id, parent_id, name의 3개 열입니다.

js 연산 사용하기
먼저 js에서 데이터가 어떻게 저장되는지부터 살펴보겠습니다.
주로 2차원 배열을 사용하여 데이터를 저장합니다. 구조는 다음과 같습니다.
a[상위 번호]=[[하위 번호 1, 하위 이름 1], [하위 번호 2, 하위 이름 2], [하위 번호 3, 하위 이름 3],...]; 🎜> 먼저 상위 번호를 사용하여 모든 하위 데이터를 가져온 다음 드롭다운에서 하위 데이터의 번호와 이름을 바인딩합니다.

첫 번째 단계는 2단계 연결 데이터입니다(방법 나중에 해당 데이터를 가져옵니다)

코드 복사 코드는 다음과 같습니다.

var 도시=새로운 배열() 
도시 ['00000000-0000-0000-0000-000000000000']=[['028db215-8bd7-45ab-bbaa-1efa175c35ca','창춘'],['bcb32195-2a46- 4cd1-9472-6383e8fa55cc',' 심양'] ]; 

var school=new Array() 
schools['028db215-8bd7-45ab-bbaa-1efa175c35ca']=[['5f22403a- 7a59-4b7f-b62d-9451298cbd00','장춘 1'],['e8f0f665-9a9a-4c44-83fd-598e8a28dcd7','장춘 2']]; -a44e-8d169d715664']]; 🎜 >
 

1단계는 도시 데이터, 2단계는 학교 데이터입니다. 

두 번째 단계는 드롭다운에 표시할 데이터를 설정하는 것입니다

코드 복사 코드는 다음과 같습니다. //부모 번호를 기준으로 해당 자녀 데이터를 가져와서 obj 컨트롤에 표시합니다.

//type=0 시, 1 학교

// pid 상위 번호
//obj - 데이터 표시를 위한 드롭다운 
function SetRegions(type,pid,obj) 
{ 
var text="선택하세요"; 
var tempArray=new Array(); 
if(type==0){ 
tempArray=cities[pid]; 
} else if (type==1){ 
tempArray=schools[pid];; 
} 
if(tempArray!=null) 
{ 
for(var i=0;i text ="" tempArray[i][1] "" 
} 
} 
$( obj).html(text); 
} 

 

세 번째 단계에서는 도시가 변경되면 학교 데이터를 선택합니다. 🎜>

코드 복사

코드는 다음과 같습니다. //학교 설정 도시 번호가 포함된 하위 데이터function CityChanged(){

SetRegions (1,$("#cities").val(),"#schools")

} 

네 번째 단계는 물론 수정을 할 때 초기화가 필요한데, 이 역시

복사하기 전에는 가장 큰 골칫거리이기도 했습니다. code

코드는 다음과 같습니다. //시 학교 값 초기화//시 ID 시 번호

//schoolId 학교 번호

 function InitRegions(cityId,schoolId) 
{ 
//도시 데이터 초기화 
//SetRegions(0,"00000000-0000-0000-0000-000000000000","#cities") 
/ /도시를 찾아 기본값으로 설정
$("#cities option[value =" cityId "]").attr("selected","selected") 
if(schoolId!=" 00000000-0000-0000-0000-000000000001"){ 
//학교 데이터 초기화
SetRegions(1,cityId,"#schools"); 
//학교를 찾아 기본값으로 설정 
$("#schools option[value=" schoolId "]").attr("선택됨", "선택됨") 
} 
} 

 

 
프런트엔드 코드

코드 복사

코드는 다음과 같습니다. <%--City--%> ;%--school--%>

 
Literal_cityId.Text = "";//도시 ID 초기화 
Literal_schoolId.Text = "";//학교 ID 초기화 

백그라운드에서 선택값 가져오기

코드 복사 코드는 다음과 같습니다.

 
string cityId = Request.Form[" 도시"] == null ? "00000000-0000-0000-0000-000000000001": Request.Form["cities"] 
string schoolId = Request.Form["schools "] == null ? "00000000-0000 -0000-0000-000000000001": Request.Form["schools"]; 

기본적으로는 그게 다입니다.
이제 js 링크 데이터 파일을 얻는 방법을 살펴보겠습니다

코드 복사 코드는 다음과 같습니다.

 
///  
 /// 지역 js 파일 생성 
///  
private void CreateRegions() 
{ 
#region Get 지역 파일 정보
string _cities = "var 도시=new Array();
" 
string _schools = "varschools=new Array();
"; 🎜>DAL.RegionInfo dalRegion = new DAL.RegionInfo(); 
#region 도시 정보
DataTable dtcity = dalRegion.GetList("parent_id='" "00000000-0000-0000-0000-000000000000" "'" ).Tables[0]; 
_cities = "cities ['" ParentId "']=["; 
foreach(dtcity.Rows의 DataRow c) 
{ 
_cities = "['" c["id"].ToString() "',' " c["name"].ToString() "'],"; 
#지역 학교 정보
DataTable dtschool = dalRegion.GetList(" parent_id ='" c["id"] "'"). 테이블[0]; 
if (dtschool == null || dtschool.Rows.Count == 0) 
{ 
계속; 
} 
_schools = "schools['" c[ "id"].ToString() "']=[" 
foreach(dtschool.Rows의 DataRow s) 
{ 
_schools = "['" s["id"].ToString() "','" s["name"].ToString() "']," 
} 
_schools = _schools.TrimEnd(', ') "];
"; 
#endregion 
} 
_cities = _cities.TrimEnd(',') "];
" 
# endregion 
Response.Write(_cities "

") 
Response.Write(_schools "

"); 🎜>#endregion 
} 

 