ComboBox 동적구현하기(JQuery 사용)

제가 요즘 JQuery 사용하는 재미에 푹~ 빠져있습니다.ㅋㅋ

 

이번 시간엔,

SharePoint 2013에서 ComboBox를 JQuery를 이용해서 동적으로 구현하는 방법에 대해 설명하겠습니다.

 

여기서 특이한 점은, 초기 ComboBox는 일반적인 Data를 Get 해와서 Binding 처리했고, 그 이후의 ComboBox Data는 앞선 부모 ComboBox 선택값에 따라 동적으로 가져오는 방법입니다.

 

1. 여기서 Data를 가져오는 방식은 Web Service를 이용했습니다.

2. .aspx페이지는 SharePoint Layout Page를 이용했고

3.  Web Service 페이지도 Layout Page에 만들어서, /_layouts/15/Cascade.aspx 이런식으로 배포했습니다.

 

자, 이제 개발내용을 보여드리도록 하겠습니다.

 

1. 우선 개발완료된 모습입니다.

   화면 우측 상단에 아이콘을 누르면 [개인설정] 화면이 팝업됩니다.

   여기서 위에서부터 ComboBox 내용을 선택하면, 아래 내용값이 일종의 Filtering되어져서 Binding 되는 방법입니다.

 

 

2. 자, 그럼 우선 페이지를 만들어 봅니다.

   SharePoint 프로젝트내에서 [새 항목] 추가를 합니다. 여기서 위치는 [Layouts]폴더 밑에 원하는 위치에 만듭니다.

   (아래 그림에 더 자세히 설명하겠습니다.)

 

3. [Layouts] 폴더 밑에 아래와 같이 생성해놓습니다.

 

 

4. 생성한 페이지에다, 아래와 같이 Label 및 ComboBox Control들을 배치해 놓습니다.

 

5. 이제 Web Service를 만들어 놉니다. 3항에서 설명되어진 위치에 이번에도 역시 LayoutPage로 만듭니다.

   또 만들기 귀찮으면 위에서 만든 페이지에다 Class를 추가후 만들어도 무관합니다.ㅋㅋ

 

6. 아래처럼, 4항에서 만든페이지에다 Script 쏘스를 구현합니다.

   원리는 앞서 설명드린 것처럼, 부모 ComboBox 값에 따라 Data가 Binding 되어지는 내용입니다.