实例化。这里增加了三个属性,可以指定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加载的更多相关文章

  1. 【EasyUI学习-2】Easyui Tree的异步加载

    作者:ssslinppp       1. 摘要 2. tree的相关介绍 3. 异步加载tree数据,并实现tree的折叠展开 3.1 功能说明: 3.2 前台代码 3.3 后台代码 4. 其他 1 ...

  2. LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据

    LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,之前我修改一版是通过reload重载实例方法填充子节点数据方式,因为递归页面元素时存 ...

  3. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格动态加载

    jQuery EasyUI 树形菜单 - 树形网格动态加载 动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待.本教程将向您展示如何创建带有动态加载特性的树形网格(Tree ...

  4. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格惰性加载节点

    jQuery EasyUI 树形菜单 - 树形网格惰性加载节点 有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载 ...

  5. Extjs-树 Ext.tree.TreePanel 动态加载数据

    先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...

  6. 扩展easyUI tab控件,添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

  7. (转)jQuery EasyUI Tree - TreeGrid动态加载子节点

    有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载顶层节点. 然后点击节点的展开图标来加载它的子节点. 本教程展示 ...

  8. jquery.unobtrusive-ajax.js的扩展,做到片段式加载

    //ajax支持库 /*! ** Unobtrusive Ajax support library for jQuery ** Copyright (C) Microsoft Corporation. ...

  9. easyui复选框树动态加载后台数据,实现自动选中数据库中数据。后台语言是.NET

    最近公司做项目用到了easyui复选框树来实现加载不同类型产品.因为我刚刚毕业,现在也算是实习吧,所以一脸懵逼啊.在公司里的一个哥的帮助下 ,我写出来这个EasyUi复选框树了,虽然东西不难,但也是自 ...

随机推荐

  1. DefaultMessageStore-CommitLog-MapedFileQueue.allocateMapedFileService初始化链

    刚刚在研究rocketmq生成文件的源码.零时记录一下MapedFileQueue中属性AllocateMapedFileService allocateMapedFileService的初始化链. ...

  2. [Android Pro] Android的5个进程等级

    1.foreground process     正处于activity resume状态     正处于bound服务交互的状态     正处于服务在前台运行的状态(StartForeGround( ...

  3. 记录一个在制作Swing程序的小怪事

    在制作一个Swing程序时,出现了奇怪的事情,程序在Eclipse里执行正常,但打包后再执行那些动态执行的控件就消失不见了.截图如下: 在Eclipse里正常执行的画面: 打包执行后出现的画面: 可以 ...

  4. java调用机器上的shell脚本

    java调用机器上的shell脚本,可以这样方便的通过shell脚本调用本机的C.C++等程序 Process process = null; Runtime runTime = Runtime.ge ...

  5. Linux中查看jdk安装目录、Linux卸载jdk、rpm命令、rm命令参数

    一.查看jdk安装目录 [root@node001 ~]# whereis java java: /usr/bin/java /usr/local/java #java执行路径 [root@node0 ...

  6. C#秘密武器之委托

    在C#的世界里,委托是无处不在,尤其在.NET自己封装的框架里到处都有其身影,所以掌握委托就很有必要了!那什么是委托呢?其实委托就是一种数据类型,跟int等东东差不多,只不过在使用时要自己先去构建一个 ...

  7. OpenCV中的矩阵和图像类型

    任务刚刚做完,就迫不及待的来写写在OpenCV中常见的几类数据类型: 在使用OpenCV时我们时常会碰到IplImage这个数据类型,IplImage就是我们通常说的“图像”进行编码的基本结构,这些图 ...

  8. RxJava异步请求加载状态控制

    在我看来,RxJava最大的特点就是异步,无论你是解析复杂的数据或是IO操作,我们都可以利用它内置的线程池进行线程间的调度,简单的使用 subscribeOn(Schedulers.io()).doO ...

  9. 算法笔记_166:算法提高 金属采集(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 人类在火星上发现了一种新的金属!这些金属分布在一些奇怪的地方,不妨叫它节点好了.一些节点之间有道路相连,所有的节点和道路形成了一棵树.一共 ...

  10. java new map

    import com.google.common.collect.Maps; public static Map<String, Object> configMap2 = new Conc ...