easyui是一種基于jQuery的用戶界面插件集合。本文是小編自己遇到的一些有關(guān)easyui treegrid的問(wèn)題記錄，特此分享腳本之家平臺(tái)供大家參考
EasyUI 簡(jiǎn)介
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化，互動(dòng)，JavaScript應(yīng)用程序，提供必要的功能。
使用easyui你不需要寫(xiě)很多代碼，你只需要通過(guò)編寫(xiě)一些簡(jiǎn)單HTML標(biāo)記，就可以定義用戶界面。
easyui是個(gè)完美支持HTML5網(wǎng)頁(yè)的完整框架。
easyui節(jié)省您網(wǎng)頁(yè)開(kāi)發(fā)的時(shí)間和規(guī)模。
easyui很簡(jiǎn)單但功能強(qiáng)大的。
菜鳥(niǎo)初次使用，參考論壇中介紹的方法仍走了一些彎路，把自己遇到的問(wèn)題記錄下來(lái)。
1.必須定義根節(jié)點(diǎn)；
2.根節(jié)點(diǎn)一個(gè)或多個(gè)均可；
4.根節(jié)點(diǎn)的父節(jié)點(diǎn)屬性不必定義，或者定義為0；
5.各級(jí)子節(jié)點(diǎn)的父節(jié)點(diǎn)屬性名稱必須為“_parentId",不能用其它名稱，此名稱已在jquery.easyui.js中定義；
6.不必在后臺(tái)ACTION中輸出“樹(shù)”形結(jié)構(gòu)的json數(shù)據(jù)，只要下面結(jié)構(gòu)的json給前臺(tái)的treegrid，就可以建立樹(shù)形輸出到頁(yè)面。（了解到后臺(tái)以樹(shù)形children格式輸出也是一種選擇。）
{"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"}
]}
這是Action
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 });
//下面是調(diào)用生成樹(shù)形數(shù)據(jù)方法的語(yǔ)句,多余！easyui可根據(jù)parentID自動(dòng)建樹(shù)
//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 });
}
}
這是前臺(tái)View
<div></div>
<table 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">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
以上內(nèi)容是小編給大家分享的Easyui 之 Treegrid 筆記，希望對(duì)大家有所幫助！