Easyui の Treegrid Notes_jquery

EasyUI の概要

easyui は、jQuery に基づいたユーザー インターフェイス プラグインのコレクションです。

easyui は、最新のインタラクティブな JavaScript アプリケーションを作成するために必要な機能を提供します。

easyui を使用すると、多くのコードを記述する必要はありません。簡単な HTML タグを記述するだけでユーザー インターフェイスを定義できます。

easyui は、HTML5 Web ページを完全にサポートする完全なフレームワークです。

easyui は、Web 開発の時間と規模を節約します。

easyui は非常にシンプルですが強力です。

今回は初めての初心者ですが、フォーラムで紹介されている方法を参考に少し寄り道したり、遭遇した問題を記録しました。

1. ルートノードを定義する必要があります。

2. 1 つ以上のルート ノードを使用できます。

4. ルートノードの親ノード属性は定義する必要がありません。または、

として定義されます。

5. すべてのレベルの子ノードの親ノード属性名は「_parentId」である必要があり、この名前は jquery.easyui.js で定義されています。

6. バックグラウンドアクション

で「ツリー」構造のjsonデータを出力する必要はありません。フロントデスクのtreegridに以下の構造のjsonを与えれば、ツリーが生成されます。形状を設定してページに出力できます。 (バックグラウンドで子をツリー形式で出力することもできることを知りました。)

これはアクションです

{"total":17,"rows":[
{"id":3,"goodsid":36120,"Qty":2.0000,"Rem":"15"},{"id":4,"goodsid":36123,"Qty":1.0000,"Rem":"21"},{"id":5,"goodsid":36124,"Qty":2.0000,"Rem":"23"},{"id":8,"goodsid":36130,"Qty":1.0000,"Rem":"1"},{"id":9,"goodsid":36131,"Qty":1.0000,"Rem":"2"},{"id":10,"goodsid":36132,"Qty":1.0000,"Rem":"3"},{"id":11,"goodsid":36133,"Qty":1.0000,"Rem":"4"},{"id":12,"goodsid":36134,"_parentId":8,"Qty":1.0000,"Rem":"1"},{"id":13,"goodsid":36135,"_parentId":8,"Qty":2.0000,"Rem":"2"},{"id":14,"goodsid":36136,"_parentId":8,"Qty":1.0000,"Rem":"3"},{"id":15,"goodsid":36137,"_parentId":8,"Qty":1.0000,"Rem":"4"},{"id":16,"goodsid":36138,"_parentId":8,"Qty":3.0000,"Rem":"5"},{"id":17,"goodsid":36139,"_parentId":8,"Qty":1.0000,"Rem":"6"},{"id":18,"goodsid":36142,"_parentId":9,"Qty":1.0000,"Rem":"1"},{"id":19,"goodsid":36143,"_parentId":9,"Qty":1.0000,"Rem":"2"},{"id":20,"goodsid":36144,"_parentId":9,"Qty":1.0000,"Rem":"3"},{"id":21,"goodsid":36145,"_parentId":9,"Qty":1.0000,"Rem":"4"}
]}

これは正面図です

var pls = ListAll(p.PartChild).ToList();
List<Object> result = new List<object>();
foreach(var item in pls)
{
if(item.PartParent == p.PartChild)
{
result.Add( new { id = item.ListID, goodsid = item.PartChild, Qty = item.Qty, Rem = item.Rem });
//下面是调用生成树形数据方法的语句,多余！easyui可根据parentID自动建树
//Object l = new { id = item.ListID, text = item.PartChild, _parentId = 0,Qty = item.Qty, Rem = item.Rem, chlidren = TreeList(pls, item.PartChild) };
//result.Add(l);
}
else
{
var parent = from a in pls
where a.PartChild == item.PartParent
select a;
result.Add(new { id = item.ListID, goodsid = item.PartChild, _parentId = parent.First().ListID, Qty = item.Qty, Rem = item.Rem });
}
} 

<div style="margin:20px 0;"></div>
<table title="Parts List" class="easyui-treegrid" style="height:250px" data-options="
url:'/ContosoBISite/PartsList/JList/',
method: 'get',
nowrap: false,
rownumbers: true,
animate: true,
collapsible: true,
fitColumns: true,
idField: 'id',
treeField: 'goodsid'
">
<thead>
<tr>
<th data-options="field:'goodsid'" width="100">goodsid</th>
<th data-options="field:'id'" width="100">ListID</th>
<th data-options="field:'ListVer'" width="100" align="right">ListVer</th>
<th data-options="field:'ParentName'" width="100">ParentName</th>
<th data-options="field:'Qty'" width="50">Qty</th>
<th data-options="field:'Rem'" width="50">Rem</th>
<th data-options="field:'_parentId'" width="50">parent</th>
</tr>
</thead>
</table> 

JS バージョン:

jquery.easyui-1.4.3.min.js; jquery-1.11.3.min.js

上記の内容は編集者が共有したEasyuiのTreegridノートですので、皆様のお役に立てれば幸いです。