jQuery를 EasyUI 양식 - 트리 드롭 다운 상자 만들기 (ComboTree)
트리 드롭 다운 상자 (ComboTree)는 트리 (콤보)와 (나무) 아래의 드롭 다운 상자입니다. 그것은 원격 서버로 전송 될 수 있으며, 양식 필드의 사용과 같은 역할을 할 수 있습니다.
이 튜토리얼에서, 우리는 이름, 주소, 도시 필드가있는 등록 양식을 작성합니다. 도시 필드는 사용자가 트리 패널 (트리 패널) 드롭 다운 특정 도시를 선택할 수있는 드롭 다운 메뉴 트리 (ComboTree) 필드이다.
양식을 작성 (양식)
<사업부 아이디 = "DLG"클래스 = "easyui-대화"스타일 = "너비 : 500 픽셀, 높이 250 픽셀; 패딩 : 10px 30 픽셀;" 제목 = "등록"버튼 = "#의 DLG-버튼"> <H2> 계정 정보 </ H2> <양식 ID = "FF"방법 = "게시물"> <표> <TR> <TD> 이름 : </ TD> <TD> <입력 유형 = "텍스트"이름 = "이름"스타일 = "너비 : 350px;"/> </ TD> </ TR> <TR> <TD> 주소 : </ TD> <TD> <입력 유형 = "텍스트"이름 = "주소"스타일 = "너비 : 350px;"/> </ TD> </ TR> <TR> <TD> 도시 : </ TD> <TD> <선택 클래스 = "easyui-combotree"URL = "데이터 / city_data.json"이름 = "도시"스타일 = "너비 : 156px;"/> </ TD> </ TR> </ 테이블> </ FORM> </ DIV> <사업부 아이디 = "DLG-버튼"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="savereg()"> </a>에 제출 <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')"> </a>을 취소 </ DIV>
당신은 위의 코드에서 볼 수있는, 우리가 '도시'트리 드롭 다운 상자라고 (ComboTree)는 url 속성 필드를 설정,이 필드는 원격 서버에서 나무 (나무) 데이터를 검색 할 수 있습니다. 이 필드 'easyui-combotree'라는 스타일을 가지고 있습니다, 그래서 우리는 어떤 JS 코드 트리 드롭 다운 상자를 작성할 필요하지 마십시오 (ComboTree) 필드는 자동으로 렌더링됩니다.