Easyui 之Treegrid 筆記

EasyUI 簡介

easyui是一種基於jQuery的用戶界面插件集合。

easyui為創建現代化，互動，JavaScript應用程序，提供必要的功能。

使用easyui你不需要寫很多代碼，你只需要通過編寫一些簡單HTML標記，就可以定義用戶界面。

easyui是個完美支持HTML5網頁的完整框架。

easyui節省您網頁開發的時間和規模。

easyui很簡單但功能強大的。

菜鳥初次使用，參考論壇中介紹的方法仍走了一些彎路，把自己遇到的問題記錄下來。

1.必須定義根節點；

2.根節點一個或多個均可；

4.根節點的父節點屬性不必定義，或者定義為0；

5.各級子節點的父節點屬性名稱必須為“_parentId",不能用其它名稱，此名稱已在jquery.easyui.js中定義；

6.不必在後台ACTION中輸出“樹”形結構的json數據，只要下面結構的json給前台的treegrid，就可以建立樹形輸出到頁面。 （了解到後台以樹形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 });//下面是調用生成樹形數據方法的語句,多餘！ 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 plswhere a.PartChild == item.PartParentselect a;result.Add(new { id = item.ListID, goodsid = item.PartChild, _parentId = parent.First().ListID, Qty = item.Qty, Rem = item.Rem });}}

這是前台View

 <div style="margin:20px 0;"></div><table 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'">goodsid</th><th data-options="field:'id'">ListID</th><th data-options="field:'ListVer'" align="right">ListVer</th><th data-options="field:'ParentName'">ParentName</th><th data-options="field:'Qty'">Qty</th><th data-options="field:'Rem'">Rem</th><th data-options="field:'_parentId'">parent</th></tr></thead></table>

JS版本： jquery.easyui-1.4.3.min.js；jquery-1.11.3.min.js

以上內容是小編給大家分享的Easyui 之Treegrid 筆記，希望對大家有所幫助！