zTree + iframe이 쿼리 최적화 경험

우리는 너무 많은 문의를 전용 텍스트 상자를 드롭 다운 상자와 내용을 발견 할 수있는 경우 1. 효율성을 극대화하기 위해 기밀 정보를 찾기 어렵고, UI는 상대적으로 간단하고 일반이다. 이 시점에서 우리는 나무 테이블, 데이터 분류의 명확한 표시를 사용하고 iframe이 페이지에있는 내용을 넣을 수 있습니다. 결과는 다음과 같이 우리가 가구를 선택하면, 테이블 데이터 만 가구의 두 가지 범주에 속하는 표시됩니다

2. 그럼 어떻게 그것을 달성하기 위해? 첫 페이지는 두 부분으로 나누어, 왼쪽은 우리의 고향입니다, 우측로드 다른 iframe이 페이지입니다. 그것은 홈 우리는 zTree을 사용, 그래서 우리는 첫 번째 행에 도서관에서 'zTree'libs와 가져와야합니다. 첫째, 우리는 데이터가 데이터 소스 데이터베이스가 될 수는 JS 가져올 수 있습니다. 예를 들어, 우리가 JS를 사용합니다 :

. 1  var에 zNodes의 = [
 2      {ID :. 1, PID : 0 이름 : "사무용품"열기 : true로 } // 열려있는 기본
 3.      {ID : 101, PID :. 1, 이름 : "가구" },
 4      {ID : 102, PID : 1 , 이름 : " 사무 기기" }
 5.      {ID : 103, PID :. 1, 이름 : "가전 제품" },
 . 6      {ID : 10101, PID : 101, 이름 : "파일 캐비닛 " }
 7.      {ID : 10102, PID : 101, 이름 :"책상 " },            
 . 8      {ID : 10103, PID : 101, 이름 :"의자 " },
 . 9      {ID : 10104, PID : 101 명 "소파" }
 10      {위에서 언급 ID : PID 10105 : 101, 상품명 : "회의 테이블" },
11 ]

우리는 다음 페이지의 DIV 태그는 지역의 zTree를 할당 :

그런 다음 <스크립트> 태그는, 나무는 JS에 의해로드됩니다

1 $ (문서) .ready ( 함수 () {
 2      VAR의 t = $ ( "# 트리" )
 3      t = $ .fn.zTree.init (t, 설정 zNodes)]
 4 });

이제, 당신이 나무를 볼 수 있습니다, 물론,이 충분하지 않습니다

3. 이제 우리는 사업부 후, 우리 HTML 페이지를로드하는 iframe이 필요합니다 :

SRC는 이미 기본 검색 기능입니다 입력 상자 또는 드롭 다운 상자와 표에 표시되는 페이지 후 데이터베이스에서 항목을받은 페이지가 있습니다. 우리는 우리가 나무 테이블 나무에 클릭 할 때 알아야 할이 시점에서, 우리는 캡처 할 수있는 변수의 사용은 대답은 우리가 JSON을 쓴 것입니다, 유효합니다. 우리는 당신이 나무를로드 할 때 우리는 설정을 설정할 수 있습니다 것을 볼, 그래서 우리는 입력 상자를 찾기 위해 iframe이 페이지에 할당 된 ID 트리 노드에 설정에서 클릭 이벤트 콜백을 설정해야합니다, 코드는 다음과 같다 :

1  // 主页框架
2  VAR의 승 = $ ( "# 메인 프레임") [0 ] .contentWindow;
3  // 树结构初始化加载
4  VAR의 {selectedMulti : = {보기 설정 오류 } 데이터 {키 {제목 : "제목"} simpleData는 {활성화 : 참 }}
 5      콜백 {온 클릭 : 함수 ( 이벤트 treeId, TREENODE) {
 6          tree.expandNode (TREENODE);
7          . 승 $ (버튼 [TYPE = 재설정] )) (.click 단계;
8          경우 (treeNode.id.length == 1 ) {
 9              승 $ ( '#의 CLASSID'. ) .val (treeNode.id);
(10)         } 다른  경우 (treeNode.id.length == 3 ) {
 11              승 $ ( '#의 sortId'. ) .val (treeNode.id);
12          } 다른  경우 (treeNode.id.length == 5 ) {
 13              승 $ ( '#의 카테고리 ID'. ) .val (treeNode.id);
14          }
 15          win.page ();
16      }}
 17 }

여기에 부모 - 자식 노드 ID의 길이를 결정하는 제 삼 백 # 분류입니다. 나는 숨길 iframe에 세 개의 상자를 넣어, 또는 아주 중복 것으로 나타났다

4. 마지막으로, 여기에 내가 내 자신을 잡아 다음 데이터베이스에서 코드 트리 테이블을 붙여 넣은 다음 비동기 아약스를 제출

zTree + iframe이 쿼리 최적화 경험

추천