Easyui 之 Treegrid 筆記
EasyUI 簡(jiǎn)介
easyui是一種基于jQuery的用戶界面插件集合。
easyui為創(chuàng)建現(xiàn)代化,互動(dòng),JavaScript應(yīng)用程序,提供必要的功能。
使用easyui你不需要寫很多代碼,你只需要通過(guò)編寫一些簡(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 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
以上內(nèi)容是小編給大家分享的Easyui 之 Treegrid 筆記,希望對(duì)大家有所幫助!
- jQuery EasyUI API 中文文檔 - TreeGrid 樹(shù)表格使用介紹
- EasyUI的treegrid組件動(dòng)態(tài)加載數(shù)據(jù)問(wèn)題的解決辦法
- EASYUI TREEGRID異步加載數(shù)據(jù)實(shí)現(xiàn)方法
- jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例
- 淺談EasyUI中編輯treegrid的方法
- 淺談EasyUI中Treegrid節(jié)點(diǎn)的刪除
- Jquery EasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法
- Easyui Treegrid改變默認(rèn)圖標(biāo)的方法
相關(guān)文章
使用jquery實(shí)現(xiàn)IE下按backspace相當(dāng)于返回操作
后退鍵在各瀏覽器下默認(rèn)為點(diǎn)擊了一下后退按鈕,下面為大家介紹下如何實(shí)現(xiàn)實(shí)現(xiàn)IE下按backspace相當(dāng)于返回操作,需要的朋友可以參考下2014-03-03jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無(wú)縫滾動(dòng)切換特效
這篇文章主要介紹了jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無(wú)縫滾動(dòng)切換特效,效果非常的棒,而且兼容性也很好,推薦給小伙伴們2015-04-04jQuery easyui刷新當(dāng)前tabs的方法
這篇文章給大家介紹了jquery easyui刷新當(dāng)前tabs的方法,本文涉及到param參數(shù)的屬性知識(shí)點(diǎn),本文通過(guò)實(shí)例給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-09-09解決IE9下JQuery發(fā)送ajax請(qǐng)求失效的方法
這篇文章介紹了解決IE9下JQuery發(fā)送ajax請(qǐng)求失效的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06jquery點(diǎn)擊頁(yè)面任何區(qū)域?qū)崿F(xiàn)鼠標(biāo)焦點(diǎn)十字效果
鼠標(biāo)點(diǎn)擊聚焦,地圖定位,在圖片上突出顯示,焦點(diǎn)定位頁(yè)面元素,這些都是在系統(tǒng)開(kāi)發(fā)是經(jīng)常需要用到的,下面為大家介紹下具體的實(shí)現(xiàn),感興趣的朋友可以參考下哈2013-06-06jQuery插件ContextMenu自定義圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了jQuery插件ContextMenu自定義圖標(biāo)的相關(guān)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03ajax實(shí)現(xiàn)動(dòng)態(tài)下拉框示例
本篇文章主要介紹了ajax實(shí)現(xiàn)動(dòng)態(tài)下拉框示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01