Pelajari pemalam jQuery EasyUI EasyUI dengan mudah untuk mencipta rangkaian pepohon (1)_jquery

1. Buat grid pokok asas dengan EasyUI
Komponen TreeGrid mewarisi daripada DataGrid tetapi membenarkan perhubungan nod ibu bapa/anak antara baris. Banyak sifat diwarisi daripada DataGrid dan boleh digunakan dalam TreeGrid. Untuk menggunakan grid pokok (TreeGrid), pengguna mesti menentukan atribut 'treeField' untuk menunjukkan medan yang bertindak sebagai nod pokok.
Artikel ini akan menunjukkan kepada anda cara menyediakan penyemakan imbas folder menggunakan komponen TreeGrid.

Buat grid pokok (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. Cipta grid pokok kompleks dengan EasyUI
TreeGrid boleh memaparkan hamparan dengan berbilang lajur dan data kompleks dalam ruang terhad. Tutorial ini menunjukkan cara menyusun data jadual dalam grid berpecah dan pengepala berbilang baris untuk mengatur data biasa.

Buat grid pokok (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>

Seperti yang anda lihat, grid pokok (Treegrid) digunakan sama seperti grid data (Datagrid). Sila gunakan atribut 'beku' untuk mentakrifkan lajur beku, dan atribut 'colspan' dan 'rowspan' lajur untuk menentukan pengepala berbilang baris.

Di atas adalah kaedah mencipta rangkaian pokok mudah dan rangkaian pokok kompleks yang dikongsi oleh EasyUI. Saya harap ia akan membantu pembelajaran semua orang.

Jika anda ingin mengetahui lebih lanjut, sila lihat artikel ini: "Pemalam jQuery yang mudah dipelajari EasyUI EasyUI untuk melaksanakan operasi asas rangkaian pokok (2)"