Easyui 之 Treegrid 笔记_.docx

Easyui 之 Treegrid 笔记_ easyui是一种基于jQuery的用户界面插件集合本文是我自己遇到的一些有关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(); ListObject result = new Listobject(); 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 }); } } 这是前台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 以上内容是我给大家分享的Easyui 之 Treegrid 笔记，盼望对大家有所关心！ ... 。