트리 네트워크 생성을 위한 jQuery 플러그인 EasyUI EasyUI를 쉽게 배워보세요. (1)_jquery

1. EasyUI로 기본 트리 그리드를 생성합니다
TreeGrid 구성 요소는 DataGrid에서 상속되지만 행 간의 상위/하위 노드 관계를 허용합니다. 많은 속성은 DataGrid에서 상속되며 TreeGrid에서 사용할 수 있습니다. 트리 그리드(TreeGrid)를 사용하려면 사용자는 어떤 필드가 트리 노드 역할을 하는지 나타내기 위해 'treeField' 속성을 정의해야 합니다.
이 문서에서는 TreeGrid 구성 요소를 사용하여 폴더 탐색을 설정하는 방법을 보여줍니다.

트리 그리드 생성(TreeGrid)

<table id="test" title="Folder Browser" class="easyui-treegrid" style="width:400px;height:300px"
 url="data/treegrid_data.json"
 rownumbers="true"
 idField="id" treeField="name">
 <thead>
 <tr>
 <th field="name" width="160">Name</th>
 <th field="size" width="60" align="right">Size</th>
 <th field="date" width="100">Modified Date</th>
 </tr>
 </thead>
</table>

2. EasyUI로 복잡한 트리 그리드 만들기
TreeGrid는 제한된 공간에 여러 열과 복잡한 데이터가 포함된 스프레드시트를 표시할 수 있습니다. 이 튜토리얼에서는 분할 그리드와 다중 행 헤더에 테이블 형식 데이터를 정렬하여 공통 데이터를 구성하는 방법을 보여줍니다.

트리 그리드 생성(TreeGrid)

<table title="Complex TreeGrid" class="easyui-treegrid" style="width:550px;height:250px"
 url="data/treegrid2_data.json"
 rownumbers="true" showFooter="true"
 idField="id" treeField="region">
 <thead frozen="true">
 <tr>
 <th field="region" width="150">Region</th>
 </tr>
 </thead>
 <thead>
 <tr>
 <th colspan="4">2009</th>
 <th colspan="4">2010</th>
 </tr>
 <tr>
 <th field="f1" width="50" align="right">1st qrt.</th>
 <th field="f2" width="50" align="right">2st qrt.</th>
 <th field="f3" width="50" align="right">3st qrt.</th>
 <th field="f4" width="50" align="right">4st qrt.</th>
 <th field="f5" width="50" align="right">1st qrt.</th>
 <th field="f6" width="50" align="right">2st qrt.</th>
 <th field="f7" width="50" align="right">3st qrt.</th>
 <th field="f8" width="50" align="right">4st qrt.</th>
 </tr>
 </thead>
</table>

보시다시피 트리 그리드(Tregrid)는 데이터 그리드(Datagrid)와 동일하게 사용됩니다. 고정된 열을 정의하려면 'frozen' 속성을 사용하고, 다중 행 헤더를 정의하려면 열의 'colspan' 및 'rowspan' 속성을 사용하세요.

위 내용은 EasyUI에서 공유하는 간단한 트리 네트워크와 복잡한 트리 네트워크를 만드는 방법입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

자세히 알아보고 싶다면 다음 기사를 확인하세요. "배우기 쉬운 jQuery 플러그인 EasyUI EasyUI로 트리 네트워크의 기본 작업 구현(2)"