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图片上下tab切换效果
图片上下切换效果,学习jquery的朋友可以参考下。
2011-03-03
使用jquery实现IE下按backspace相当于返回操作
后退键在各浏览器下默认为点击了一下后退按钮，下面为大家介绍下如何实现实现IE下按backspace相当于返回操作,需要的朋友可以参考下
2014-03-03
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
这篇文章主要介绍了jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效,效果非常的棒，而且兼容性也很好，推荐给小伙伴们
2015-04-04
jquery.cookie.js的介绍与使用方法
相信大家都知道jquery.cookie.js是一个轻量级的cookie 插件，可以读取、写入、删除 cookie。下面这篇文章就来给大家简单的介绍下关于jquery.cookie.js的介绍与使用方法，需要的朋友可以参考借鉴，一起来看看吧。
2017-02-02
Jquery常用技巧收集整理篇
jQuery 1.4给开发者带来了很多值得兴奋的新特性，同时使用jQuery的人也越来越多，为了方便大家对jQuery的使用，下面列出了一些jQuery使用技巧。
2010-11-11
jQuery easyui刷新当前tabs的方法
这篇文章给大家介绍了jquery easyui刷新当前tabs的方法，本文涉及到param参数的属性知识点，本文通过实例给大家介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-09-09
解决IE9下JQuery发送ajax请求失效的方法
这篇文章介绍了解决IE9下JQuery发送ajax请求失效的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
jquery点击页面任何区域实现鼠标焦点十字效果
鼠标点击聚焦，地图定位，在图片上突出显示，焦点定位页面元素，这些都是在系统开发是经常需要用到的，下面为大家介绍下具体的实现，感兴趣的朋友可以参考下哈
2013-06-06
jQuery插件ContextMenu自定义图标
这篇文章主要为大家详细介绍了jQuery插件ContextMenu自定义图标的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
ajax实现动态下拉框示例
本篇文章主要介绍了ajax实现动态下拉框示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01