EasyUI的功能树之异步树

最近几个项目都用到了EasyUI这个Jquery框架，目前感受起来仍是很好使的，展现效果很好，帮助文档什么的资料不少，并且互联网上Easy粉不少，大多数拥护和喜好EasyUI的粉丝们都愿意在网络平台互相分享学习成果，甚至有专门的社区来讨论使用状况，网址是http://bbs.jeasyuicn.com/，里面的资源模块里有不少都是免费的学习资料，包括视频文档项目源码等，建议初学者去看视频，而后研究一下这个网站（sypro）的实现http://sshe.jeasyuicn.com/，甚至有视频教程教你们怎么实现这个项目。互联网是一个巨人，他博学多才，期待能站在巨人的肩膀上开开眼界，学习到更多的知识技能，对于未来或如今的工做都是一个很大的收获。

　　本篇博客是对EasyUI中树的实现的总结。若是想要展现一棵树，有不少方式，固然要分析你的需求。若是是展现省市区、学校、部门等大数据的话，建议仍是使用异步加载。固然若是只是展现几个几乎不变的菜单项，就能够扁平化的展现你的数据了。

　　首先介绍怎么实现一棵异步树。

　　项目前准备:

　　一、首先你要搭建一个你熟悉的框架环境，而后再前台加入EasyUI的源码包，并在页面引入js和css等文件。本文的实例主要讲解怎么实现树，以SSH框架为例。若是还有不懂怎么搭建EasyUI框架的同窗，能够在EasyUI的中文社区里找EasyUI的初级视频来看看，很是简单的。

　　二、创建数据库，比方说咱们要经过树来展现你的菜单，那么就要先看一下EasyUI中tree的Data Format，也就是说咱们要了解后台传给前台什么样式的Json格式。

　　

　　从上面的文档截图能够看出，他的数据格式有如下属性：id,text,state,checked,attributes,children;

　　咱们在设计数据库的时候，能够尽可能的将节点id和节点名称分别设置成id和text，这样在前台解析Json的时候就能直接认出这些属性值，并显示出数据来。固然利用扩展的方式的话，你能够没必要按照这些规范来，可是须要在tree控件里传入几个参数来传入属性值。

　　首先，创建一个t_menu表：（注释如图）

　　

　　外键：

　　

　　测试数据：

    

　　

　　准备完以上的内容以后，咱们开始作demo。

　　一、加入EasyUI的树控件：

 

<ul id="menuTree" class="easyui-tree" data-options="url:'<%=basePath%>menuAction!getTreeNode.action',parentField:'pid',lines:true,onLoadSuccess:function(node, data){$(this).tree('collapseAll')}"></ul>

 

 

 

　解析：

data-options里的URL是Action的路径，p

arentField设置成咱们model里的pid，

lines:true用来显示树节点前的加减号，

onLoadSuccess:function(node, data){$(this).tree('collapseAll')}用来设置关闭全部的树节点。

　　加入扩展js:

$.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;
};

最后展现实现效果：当单击加号的时候才会加载其子节点，异步实现了功能树。