Easyui 之 Treegrid 笔记


Posted in Javascript onApril 29, 2016

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 笔记,希望对大家有所帮助!

Javascript 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 #Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 #Javascript
JavaScript函数柯里化详解
Apr 29 #Javascript
easyui validatebox验证
Apr 29 #Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 #Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 #Javascript
Bootstrap模态对话框的简单使用
Apr 29 #Javascript
You might like
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
jquery中动态效果小结
2010/12/16 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
TensorFlow实现模型评估
2018/09/07 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
Django实现分页显示效果
2019/10/31 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
哪些是python中web开发框架
2020/06/17 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
会计岗位职责
2015/02/03 职场文书
前台岗位职责范本
2015/04/16 职场文书
惊天动地观后感
2015/06/10 职场文书
学校教学管理制度
2015/08/06 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
Promise面试题详解之控制并发
2021/05/14 面试题
解决mysql:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO/YES)
2021/06/26 MySQL
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS