实例化。这里增加了三个属性,可以指定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的数据节点,想要根据层级显示不同的icon

function getLevel(node, level){
var children = node.children;
if(level == 0)
node.iconCls = "icon-add";
else if( level == 1)
node.iconCls = "icon-remove";
else if ( level == 2)
node.iconCls = "icon-save";
if(children)
for( var i = 0; i < children.length; i++){
getLevel(children[i], level+1);
}
}
<ul class="easyui-tree" data-options="url:'tree.do.json', method:'get', animate:true, lines:true, checkbox:true, loadFilter:function (data, parent){
for( var i = 0; i < data.length; i++){
getLevel(data[i], 0);
}
return data; }"></ul>

easyui tree loadFilter的使用的更多相关文章

  1. [转]easyui tree 模仿ztree 使用扁平化加载json

    原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.h ...

  2. Jquery easyui tree的使用

    这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...

  3. EasyUI –tree、combotree学习总结

    EasyUI –tree.combotree学习总结 一.   tree总结 (一).tree基本使用 tree控件是web页面中将数据分层一树形结构显示的. 使用$.fn.tree.defaults ...

  4. Easyui tree 开启拖放后 在IE下 性能惨不忍睹

    项目中加载一个树结构代码如下 //加载树 function LoadTree() { var url = "../Ajax/StationTree.ashx?showVirtual=1&qu ...

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

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

  6. 数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格

    EasyUI Datagrid 数据网格 扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

  7. .NET easyUI tree树状结构

    简单的制作后台制作写一个json(string类型)格式 public partial class goodstype_type : System.Web.UI.Page { public strin ...

  8. Easyui Tree方法扩展 - getLevel(获取节点级别)

    Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...

  9. 【项目经验】EasyUI Tree

    ITOO5.0开始了,我参加了伟大的基础系统,从整体上来说,基础系统有三个职能: 1.自己的核心职能--选课(公共选修课,专业选修课),课表: 2.为其他系统提供真实数据: 3.维护信息 而近两三天, ...

随机推荐

  1. Java 数据库操作类

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  2. [Unity3D]添加音效说明

    添加音效组件并添加音乐资源 其中Pitch用来提高和降低音调的,比如可以和赛车游戏的轮胎绑定,当轮胎越快,则音调越高 2D/3D音效:2D音效和摄影家的距离无关,可以看做是一个背景音乐:而3D音效则是 ...

  3. Another app is currently holding the yum lock

    摘要 在使用yum安装的时候,出现该error. 错误 Another app is currently holding the yum lock; waiting for it to exit... ...

  4. poj1399 hoj1037 Direct Visibility 题解 (宽搜)

    http://poj.org/problem?id=1399 http://acm.hit.edu.cn/hoj/problem/view?id=1037 题意: 在一个最多200*200的minec ...

  5. MySQL数据类型 int(M) 表示什么意思?详解mysql int类型的长度值问题

    MySQL 数据类型中的 integer types 有点奇怪.你可能会见到诸如:int(3).int(4).int(8) 之类的 int 数据类型.刚接触 MySQL 的时候,我还以为 int(3) ...

  6. php万年历

    最近学习php循环.日期显示.GET方式请求,进而实现了一个小程序. 直接上代码: <?php header("Content-type:text/html; charset=UTF- ...

  7. CDN的特点

    CDN的特点 1.本地Cache加速提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度,并大大提高以上性质站点的稳定性(省钱,用户体验提升). 2.镜像服务消除了不同运营商之间的瓶颈造成的影响 ...

  8. javascript基础05

    javascript基础05 1.变量的作用域 变量既可以是全局,也可以是局部的. 全局变量:可以在脚本中的任何位置被引用,一旦你在某个脚本里声明了全局变量,你就可以 在这个脚本的任何位置(包括函数内 ...

  9. 12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是 ...

  10. PYTHON 全局变量和局部变量

    #局部变量,只能调用函数体内的变量 def fun(): a = 234 print(a) #全局变量,在函数体外声明,在函数体内都可调用 b = 'gyc' def fun(): a = 234 p ...