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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
点击文章内容处弹出页面代码
Oct 01 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
javascript实用方法总结
Feb 06 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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/03/10 PHP
关于php fread()使用技巧
2010/01/22 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
详解php中 === 的使用
2016/10/24 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
详解重置Django migration的常见方式
2019/02/15 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
pytorch 常用线性函数详解
2020/01/15 Python
Python celery原理及运行流程解析
2020/06/13 Python
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
工作表扬信的范文
2014/01/10 职场文书
网络编辑岗位职责范本
2014/02/10 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
高考1977观后感
2015/06/04 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Python图片处理之图片裁剪教程
2021/05/27 Python
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏