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 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
Js组件的一些写法
Sep 10 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
js运动动画的八个知识点
Mar 12 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
vue中的使用token的方法示例
Mar 10 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表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
php重定向的三种方法分享
2012/02/22 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
jQuery实现轮播图效果
2019/11/26 jQuery
vscode调试node.js的实现方法
2020/03/22 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
Python with用法实例
2015/04/14 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
探矿工程师自荐信
2014/01/24 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
党员创先争优承诺书
2014/03/26 职场文书
加强作风建设心得体会
2014/10/22 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
Android自定义双向滑动控件
2022/04/19 Java/Android
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python