ツリーネットワークを作成する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>

ご覧のとおり、ツリー グリッド (Treegrid) はデータ グリッド (Datagrid) と同じように使用されます。固定列を定義するには「frozen」属性を使用し、複数行ヘッダーを定義するには列の「colspan」属性と「rowspan」属性を使用してください。

上記は EasyUI で共有される単純なツリー ネットワークと複雑なツリー ネットワークの作成方法であり、皆さんの学習に役立つことを願っています。

さらに詳しく知りたい場合は、こちらの記事をご覧ください: 「ツリーネットワークの基本操作を実装する簡単に学べる jQuery プラグイン EasyUI EasyUI (2)」