AUISoft에이유아이소프트
데모 본문으로 이동

계층 구조에서 트리 아이콘을 재정의하고, 트리의 depth 별로 스타일을 적용한 모습입니다.

HTML CSS 에서 다음과 같이 기본 클래스를 재정의하여 원하는 아이콘으로 변경 하십시오.

<style>
/* 트리 아이콘 재정의 */
.aui-grid-tree-plus-icon {
	display: inline-block;
	width: 16px;
	background: url(./assets/tree_plus.png) 50% 50% no-repeat;
	background-size: 16px;
	margin: 0 4px 2px 0;
}

.aui-grid-tree-minus-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(./assets/tree_minus.png) 50% 50% no-repeat;
	background-size: 16px;
	margin: 0 4px 2px 0;
}

.aui-grid-tree-branch-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(./assets/tree_branch.png) 50% 50% no-repeat;
	background-size: 16px;
	margin: 0 2px 0 0;
}

.aui-grid-tree-branch-open-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(./assets/tree_branch.png) 50% 50% no-repeat;
	background-size: 16px;
	margin: 0 2px 0 0;
}

.aui-grid-tree-leaf-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(./assets/tree_leaf.png) 50% 50% no-repeat;
	margin: 0 2px 0 0;
}
</style>