基于jquery的树形结构JsTree 使用心得 -

elfasd

浏览: 98429 次
性别:
来自: 北京

最近访客更多访客>>

singlesteven

roger_lf

s85305104

fkshl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

基于jquery的树形结构JsTree 使用心得

博客分类：

js ajax jstree json spring

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等查件，其他的正在探索中，以上捉见望起到抛砖引玉的

的效果，有什么疑问或者高见的希望大家交流交流，邮箱：zhang_luping_happy@126.com