Introduction to EasyUI
easyi is a collection of user interface plugins based on jQuery.
easyi provides the necessary features for creating modern, interactive, JavaScript applications.
Using easyi you don't need to write a lot of code, you just need to write some simple HTML tags to define the user interface.
easyi is a complete framework that perfectly supports HTML5 web pages.
Easyui saves you time and scale of web development.
Easyui is simple but powerful.
When I was using it for the first time, I still took some detours in the reference method introduced in the forum and recorded the problems I encountered.
1. The root node must be defined;
2. One or more root nodes can be used;
4. The parent node attribute of the root node does not need to be defined, or is defined as 0;
5. The parent node attribute name of child nodes at each level must be "_parentId", and no other name can be used. This name has been defined in jquery.easyui.js;
6. There is no need to output json data in the "tree" structure in the background ACTION. As long as the json of the following structure is given to the treegrid in the front desk, you can create a tree output to the page. (It is also an option to output the background in the tree-shaped children format.)
{"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.0 000,"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"}]}This is an 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 });//The following is a statement calling the spanning tree data method, redundant! easyi can automatically create a tree based on 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 });}}This is the front desk 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,collapse: true,collapse: true,fitColumns: true,idField: 'id',treeField: 'goodsid'"><treeField: 'goodsid'"><treeField: '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 version: jquery.easyui-1.4.3.min.js; jquery-1.11.3.min.js
The above content is the Easyui Treegrid notes shared by the editor. I hope it will be helpful to everyone!