1. Home
  2. jQuery를 EasyUI 트리 메뉴 - 트리 게으른 로딩 그리드 노드

최고의 jQuery를 EasyUI 트리 메뉴 - 트리 게으른 로딩 그리드 노드 튜토리얼 2024년, 이 튜토리얼에서는 jQuery를 EasyUI 예제를 다운로드,를 배울 수 있습니다.

jQuery를 EasyUI 트리 메뉴 - 트리 게으른 로딩 그리드 노드

때때로 우리는 완전히 계층 트리 그리드 (TreeGrid에) 데이터 있었다. 우리는 또한 트리 그리드 (TreeGrid에) 계층 게으른 로딩 노드를 할 수 있습니다. 첫째, 오직 최상위 노드를로드합니다. 아이콘을 클릭 한 다음 자식 노드를로드 할 노드를 확장합니다. 이 튜토리얼에서는 불활성 부하 특성 그리드 (TreeGrid에)와 함께 나무를 만드는 방법을 보여줍니다.

나무 격자 생성 (TreeGrid에) 

	<표 아이디 = "테스트"제목 = "폴더 탐색기"클래스 = "easyui-TreeGrid에"스타일 = "너비 : 700 픽셀, 높이 300 픽셀"
			데이터 옵션 = "
				URL : '데이터 / treegrid_data.json'
				방법 : '얻을'
				rownumbers : 사실,
				idField '아이디',
				treeField '이름',
				loadFilter : myLoadFilter
			">
		<THEAD>
			<TR>
				<목 필드 = "이름"너비 = "220"> 이름 </ 일>
				<제 /> 크기 <목 필드 = "크기"폭 = "100"= "권리"정렬>
				<목 필드 = "날짜"너비 = "150"> 수정 한 날짜 </ 일>
			</ TR>
		</ THEAD>
	</ 테이블>

우리는 '어린이'속성의 이름을 변경해야하는 각 노드를 부하 자식 노드를 배치합니다. 다음 코드, '어린이'속성 이름 바꾸기 '1 아동'에 나타낸 바와 같이. 노드를 확장하면, 우리는 그 자식 노드의 데이터를로드하기 위해 'APPEND'메서드를 호출합니다.

'LoadFilter'코드 

	기능 myLoadFilter (데이터, parentId) {
		함수 사항 setData () {
			var에 할 일 = [];
			대한 (var에 나는 = 0; i가 data.length입니다을 <; 내가 ++) {
				todo.push (데이터 [I]);
			}
			동안 (todo.length) {
				VAR 노드 todo.shift = ();
				경우 (node.children) {
					node.state = '폐쇄';
					node.children1 = node.children;
					node.children = 정의되지 않은;
					할 일 = todo.concat (node.children1);
				}
			}
		}
		
		사항 setData (데이터);
		VAR TG = $ (이);
		VAR은 = tg.treegrid ( '옵션')을 선택 해제;
		opts.onBeforeExpand = 기능 (행) {
			경우 (row.children1) {
				tg.treegrid은 ({, '추가'
					부모 : 행 [opts.idField]
					데이터 : row.children1
				});
				row.children1 = 정의되지 않은;
				tg.treegrid ([opts.idField] 행, '확장');
			}
			반환 row.children1는 == 정의되지 않은;
		};
		데이터를 반환;
	}

jQuery를 EasyUI 예제를 다운로드

jeasyui-tree-treegrid5.zip

핫 튜토리얼

Contact US

jQuery를 EasyUI 트리 메뉴 - 트리 게으른 로딩 그리드 노드
10/30