文档章节

EasyUI的功能树之异步树

易水寒丶开源
 易水寒丶开源
发布于 2015/11/17 18:37
字数 921
阅读 246
收藏 10

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

  本篇博客是对EasyUI中树的实现的总结。如果想要展示一棵树,有很多方式,当然要分析你的需求。如果是展示省市区、学校、部门等大数据的话,建议还是使用异步加载。当然如果只是展示几个几乎不变的菜单项,就可以扁平化的展示你的数据了。

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

  项目前准备:

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

  2、建立数据库,比方说我们要通过树来展示你的菜单,那么就要先看一下EasyUI中tree的Data Format,也就是说我们要了解后台传给前台什么样式的Json格式。

  

  从上面的文档截图可以看出,他的数据格式有以下属性:id,text,state,checked,attributes,children;

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

  首先,建立一个t_menu表:(注释如图)

  

  外键:

  

  测试数据:

    

  

  准备完以上的内容之后,我们开始做demo。

  1、加入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;
};


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

  

  

本文转载自:http://www.cnblogs.com/jyh317/p/3928729.html

易水寒丶开源
粉丝 0
博文 27
码字总数 10052
作品 0
济南
程序员
私信 提问
加载中

评论(1)

吃饭睡觉打豆豆yd
吃饭睡觉打豆豆yd
很棒
easyui tree异步加载

easyui tree的异步加载实现很简单,easyui的中文API文档中有实例(http://api.btboys.com/easyui/)——创建异步树形菜单,就是在tree node 元素中要有一个id属性,同时还需要state的属性(s...

菠萝啊哈哈
2013/04/11
0
0
python递归实现Easyui combotree树

原文链接:http://www.huangdc.com/43 自动化发布系统在选择文件时,使用jQuery EasyUI 创建页面 树形菜单(Tree) 及 后端python 递归实现Easyui combotree 树。这里主要分享2点: 1、linux 中...

dchuang
2014/11/19
0
0
EasyUI的combotree设置值问题

如图,用EasyUI的combotree做了个树形下拉框。是异步的。点父节点加载子节点。取值的时候没有问题。 问题在下面 就是往表单里设置值的时候,如果值是根节点的,能正常显示文字,如果是子节点...

雨花石
2014/09/04
6.3K
1
jQuery EasyUI使用教程之创建可折叠面板

<jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识。折叠面板包含了一系列的面板,其中所有的面板标题都是可见的,但只有一个面板的主体内容在某个时间是可见的。...

Miss_Hello_World
2015/11/13
0
0
Jquery easyui tree 模板

Jquery easyui 是不错的开源框架,主页地址是:http://jquery-easyui.wikidot.com/ 在日常工作中,常常会有弹出的树形选择窗口。 导入代码: <link rel="stylesheet" type="text/css" href=......

yuhonglei4025
2010/08/25
0
3

没有更多内容

加载失败,请刷新页面

加载更多

由test_decoding学习如何编写PostgreSQL逻辑解码插件

PostgreSQL提供很多接口,允许用户定制自己需要的功能,很多时候文档并不能让我们完全理解和把握它们的使用。如果需要开发一个自己的功能,该如何下手?下边是我作为一名代码搬运工的工作方式...

有理想的猪
48分钟前
4
0
IT兄弟连 Java语法教程 流程控制语句 循环结构语句3

while循环 Java中的另外一种循环是while循环。while循环的语法格式如下: while(条件表达式){ 循环体; } 其中条件表达式定义了控制循环的条件,可以使任何有效的boolean表达式,条件为真时,...

老码农的一亩三分地
58分钟前
2
0
OSChina 周四乱弹 —— 你们倒是救驾啊,别笑啦

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @RISYOII :#今日歌曲推荐# 一荤一素 太年轻的人 他总是不满足 固执地不愿停下 远行的脚步 望着高高的天 走了长长的路 忘了回头看 她有没有哭...

小小编辑
今天
2K
15
idea下springboot 项目在static目录下添加文件不生效

idea下springboot 项目在static目录下添加文件不生效 问题描述 是这样子的,我的项目目录结构如下: 我在static目录下,创建了index.html和aaaa.jpg这两个文件。然后,启动服务访问 http://l...

wotrd
昨天
7
0
k8s1.14 一、环境

1. 4台虚拟机 (CentOS Linux release 7.2.1511 (Core) ) 192.168.130.211 master 192.168.130.212 node1 192.168.130.213 node2 192.168.130.214 node3 2. 设置服务器hostname 2.1 设置本机......

ThomasCheng
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部