Easyui 之 Treegrid 笔记
更新时间：2016年04月29日 10:31:42 作者：许好多
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();
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 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 笔记，希望对大家有所帮助！
相关文章
这篇文章主要介绍了JQuery替换DOM节点的方法,实例分析了jQuery中replaceWith()和replaceAll()方法的相关使用技巧与注意事项,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了Jquery实现移动端控制DIV拖拽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了js/jquery判断图片是否存在的函数代码,需要的朋友可以参考下2023-06-06
下面小编就为大家带来一篇浅谈jQuery添加的HTML,JS失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要为大家详细介绍了jquery遍历json对象集合、jQuery 遍历JSON对象、jquery中遍历读取json串中的对象三种情况，感兴趣的小伙伴们可以参考一下2016-05-05
最近在做日志统计程序，发现对方的程序是在Jquery基础上进行开发的，而公司的网站的框架是prototype。而且我也早就想了解一下Jquery源码，故决定研究Jquery源码，模拟它的方法2012-12-12
在实际应用中，文本框中有时候只能够允许输入整数，但是有时候可能更为"博爱"一点，可以允许输入浮点数，下面就通过实例代码介绍一下如何利用jquery实现此功能2016-01-01
这篇文章主要介绍了jQuery实现响应浏览器缩放大小并改变背景颜色,比较实用，也很简单，使用到了一个resize事件需要的朋友可以参考下2014-10-10
这篇文章主要介绍了jQuery实现复选框批量选择与反选的方法,主要通过jQuery的attr与removeAttr方法实现选择与反选的功能,非常具有实用价值,需要的朋友可以参考下2015-06-06
jQuery 插件图片切换 第一次自已偿试写插件，需要的朋友可以参考下2012-05-05
最新评论