jstree很强大,怎么强大,可以百度一下,这里只讲解一下我在项目中对jstree的使用心得。
项目中要做一个树导航,点击导航节点可以定位到具体的界面,如下图,每个节点都是一个链接:
概述:
1、后台组织json数据
2、前台jstree框架通过ajax方法调用
步骤如下:
一、准备工作
1、引入后台生成json数据的jar包:gson-1.7.1.jar
2、引入jstree框架,这个可以去官网或者其他网友的博客搜索,我将js端的一套东西压缩成一个 压缩包jstree.zip,解压后直接放到WEB项目的WebContent下就可以。
二、后台组织jstree需要的json数据以及前台调用
1、将json中的各个属性映射到具体的java类
什么意思,就是jstree需要特定格式的json,json中的一些属性等,做成java的映射
可以参看压缩包 test.zip
入口类:MyJsTree.java 的 jstree 方法,这是一个cmd类,可以根据自己框架的
跳转自己定义,或者将其抽出单独做个方法。
大家主要关注其中的NodeBean.java NodeData.java NodeAttr.java A.java即可
上面的类要感谢一位网友,很久之前下载了一段代码,忘了出处了,找到后一定补
上链接
入口类的思想是:
a:通过MyLinkCWDao.java MyLinkDao.java MyLinkKQDao.java
从 KUFANG KUQU CUWEI 三张表中获取数据,放入map中,为tree提供数据
sql已经作为附件上传,oracle下的,这些数据也可以写死用于测试,就是不必太关心
上面的三个类
b:按照 库房、库区、存储区组装节点
大家可以参考一下我提供的 TreeAdapter.java 这个带main函数的类,
看一下生成的json的格式
2、前台jstree框架异步调用上面的cmd,获得返回数据
a:就看一个jsp文件即可 testTree.jsp 注释都写在里面了
b:需要引入一些js,都写在了上面jsp的<head>标签里
三、注意事项
这里用的是一个名为 loushang 的IDE做的,它基于spring,下面是我用到的配置文件,大家可以参考一下结构,其他的就不必要了
<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd"> <beans> <!--******dao配置**********--> <bean id="mylinkDao" class="test.json.MyLinkDao"> <property name="dataSource"><ref bean="dataSource"/></property> </bean> <bean id="mylinkKQDao" class="test.json.MyLinkKQDao"> <property name="dataSource"><ref bean="dataSource"/></property> </bean> <bean id="mylinkCWDao" class="test.json.MyLinkCWDao"> <property name="dataSource"><ref bean="dataSource"/></property> </bean> <!--******cmd配置**********--> <bean id="first" class="test.MyJsTree"> <property name="menuxml"><ref bean="menuxml"/></property> <property name="mylinkDao"><ref bean="mylinkDao"/></property> <property name="mylinkKQDao"><ref bean="mylinkKQDao"/></property> <property name="mylinkCWDao"><ref bean="mylinkCWDao"/></property> <property name="forwards"> <map> <entry key="first"><ref bean="firstforward"/></entry> </map> </property> </bean> <!--******界面转向forward配置开始***********--> <bean id="firstforward" class="org.loushang.waf.mvc.ServletDispatcherForward"> <property name="mappings"> <props> <prop key="hello">jsp/test/hello.jsp</prop> <prop key="change">jsp/test/change.jsp</prop> <prop key="jstree">jsTree/tree/testTree.jsp</prop> </props> </property> </bean> </beans>
这里只用到了jstree 的 ui 、json等查件,其他的正在探索中,以上捉见望起到抛砖引玉的
的效果,有什么疑问或者高见的希望大家交流交流,邮箱:[email protected]