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

테이블 구조
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("선택됨", "선택됨")
}
}




프런트엔드 코드

코드 복사

코드는 다음과 같습니다.

;%--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
}

페이지에서 출력되는 js 링크 데이터를 js 파일에 직접 복사
3레벨 또는 다레벨로 변경할 수도 있습니다. 자신의 필요에 따라 연결하는 것도 같은 원리입니다.
모두에게 도움이 되길 바랍니다