ホームページ > 記事 > ウェブフロントエンド > ツリーネットワークを作成する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)」