easyui 扩展 之 Tree的simpleData加载
实例化。这里增加了三个属性,可以指定idFiled,textFiled和parentField。所以这里的simpleData可以不严格转换成tree的数据格式。
$(function(){
$('#tt3').tree({
checkbox: true,
url: 'tree_data_simp.php',
parentField:"pid",
textFiled:"name",
idFiled:"key"
});
});
tree_data_simp.php 的json数据类型。是一个扁平结构数据集。
[
{
"key": 1,
"name": "Folder1",
"iconCls": "icon-ok"
},
{
"key": 2,
"pid": 1,
"name": "File1",
"checked": true
},
{
"key": 3,
"pid": 1,
"name": "Folder2",
"state": "open"
},
{
"key": 4,
"pid": 3,
"name": "File3",
"attributes": {
"p1": "value1",
"p2": "value2"
},
"checked": true,
"iconCls": "icon-reload"
},
{
"key": 8,
"pid": 3,
"name": "Async Folder"
},
{
"key": 9,
"name": "language",
"state": "closed"
},
{
"key": "j1",
"pid": 9,
"name": "Java"
},
{
"key": "j2",
"pid": 9,
"name": "C#"
}
]
自定义loadFilter的实现
$.fn.tree.defaults.loadFilter = function (data, parent) {
var opt = $(this).data().tree.options;
var idFiled,
textFiled,
parentField;
if (opt.parentField) {
idFiled = opt.idFiled || 'id';
textFiled = opt.textFiled || 'text';
parentField = opt.parentField;
var i,
l,
treeData = [],
tmpMap = [];
for (i = 0, l = data.length; i < l; i++) {
tmpMap[data[i][idFiled]] = data[i];
}
for (i = 0, l = data.length; i < l; i++) {
if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) {
if (!tmpMap[data[i][parentField]]['children'])
tmpMap[data[i][parentField]]['children'] = [];
data[i]['text'] = data[i][textFiled];
tmpMap[data[i][parentField]]['children'].push(data[i]);
} else {
data[i]['text'] = data[i][textFiled];
treeData.push(data[i]);
}
}
return treeData;
}
return data;
};
easyui 扩展 之 Tree的simpleData加载的更多相关文章
- 【EasyUI学习-2】Easyui Tree的异步加载
作者:ssslinppp 1. 摘要 2. tree的相关介绍 3. 异步加载tree数据,并实现tree的折叠展开 3.1 功能说明: 3.2 前台代码 3.3 后台代码 4. 其他 1 ...
- LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据
LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,之前我修改一版是通过reload重载实例方法填充子节点数据方式,因为递归页面元素时存 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格动态加载
jQuery EasyUI 树形菜单 - 树形网格动态加载 动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待.本教程将向您展示如何创建带有动态加载特性的树形网格(Tree ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格惰性加载节点
jQuery EasyUI 树形菜单 - 树形网格惰性加载节点 有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载 ...
- Extjs-树 Ext.tree.TreePanel 动态加载数据
先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...
- 扩展easyUI tab控件,添加加载遮罩效果
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...
- (转)jQuery EasyUI Tree - TreeGrid动态加载子节点
有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载顶层节点. 然后点击节点的展开图标来加载它的子节点. 本教程展示 ...
- jquery.unobtrusive-ajax.js的扩展,做到片段式加载
//ajax支持库 /*! ** Unobtrusive Ajax support library for jQuery ** Copyright (C) Microsoft Corporation. ...
- easyui复选框树动态加载后台数据,实现自动选中数据库中数据。后台语言是.NET
最近公司做项目用到了easyui复选框树来实现加载不同类型产品.因为我刚刚毕业,现在也算是实习吧,所以一脸懵逼啊.在公司里的一个哥的帮助下 ,我写出来这个EasyUi复选框树了,虽然东西不难,但也是自 ...
随机推荐
- thinkphp 表名 大小写 窍门
我们有一个表auth_group_access,那么如何使用呢?在使用M方法时,对于带下划线的表名,可以采用如下方法. M('AuthGroupAccess');对应sql语句SQL: SHOW CO ...
- 算法笔记_069:Floyd算法简单介绍(Java)
目录 1 问题描述 2 解决方案 2.1 使用Floyd算法得到最短距离示例 2.2 具体编码 1 问题描述 何为Floyd算法? Floyd算法功能:给定一个加权连通图,求取从每一个顶点到其它所 ...
- connect(mapStateToProps,mapDispatchToProps) 的写法
1.写法 import { connect } from 'redux'; import { loading, asyncRequset } from '../../actions/common'; ...
- 【服务器时间修改为东八区】包括Apache2和mysql
1.服务器Apache时间修改,可通过修改php.ini进行修改 所以就深入了解了一下, 发现Apache(PHP)的服务器时间时区默认为UTC(Coordinated UniversalTime 世 ...
- 在go中使用leveldb --levi
github上有个比较好用的leveldb go wrapperlevigo, 安装之前需现在机器上安装leveldb 当前版本的LevelDB没有带安装脚本,需自行编译安装,过程如下: instal ...
- Android实现换肤功能(二)
前两天写的上章关于换肤的功能获得了很好的反响,今天为大家介绍另一种方式.今天实现的策略也是网友建议的,然后我自己去写了个demo,大家自己评估下相比第一种方式的优势和劣势在哪里. 简单介绍下关于第一种 ...
- php中对象是引用类型吗?
这貌似是一个极其简单的问题,还用得着专门写一篇博文?各位看官,最初我也这么认为,但这的确蒙蔽了你那水灵灵的小眼睛,不妨看看什么是引用? $a = 10; $b = &$a; $b = 20; ...
- 自制MVC框架CRUD操作、列表、分页显示插件介绍
这里涉及到的操作都是引用自Stephen.DALService数据层.数据访问层实现方式在后文中我会仔细的说明,先说明一下数据操作集成的插件. 1).InsertAttribute 用于插入记录. 状 ...
- php实现IP地址和数字相互转换
echo $a=ip2long ("202.97.224.68");//地址转换成数字 系统自带的函数 注:这里面有一个要注意的地方,大概由于PHP无法正确判断转换完的数字类型,出 ...
- nodejs 中使用shell脚本
虽然nodejs的require('child_process').execSync可以使用shell,但其实问题特别多.尤其是符号和语法冲突,可读性也很差,只能完成一些小规模的shell使用. co ...