jqueryのdialogとztreeを結合する方法

1814 ワード

ステップ1:juqury-ui、ztreeのjsファイル、cssファイルを準備します.
ステップ2:example.jspファイルコードに書く
 
..  jqueryui、ztree  js css  

<body>

<button value="      dialog   " onclick ="getTree()"/>

<div id="ztree" class="ztree"/>

</body>

<script type="text/javascript">

function getTree(){

   var url = "<c:url value='xx.html'/>";

var setting={



};

var zNodes =[];

var option={

width:200,

hight:300

};

$.ajax({

url : url ,

success : function(data){

$.each(data,funtion(n,d){

zNode.push({

id:d.id,

name:d.name,

pId:d.pId

})

});

$.fn.init.ztree($('#ztree'),setting,zNode);

$('#ztree').dialog(option);

}

})

}

</script>

ステップ3:バックグラウンドでのデータの提供
 
 
@RequestMapping("/zone_ajaxtree")

	@ResponseBody

	public List<ZoneBody> zone_ajaxtree() {

		List<ZoneBody> zones = zoneBodyService.getZone_ajax();

		return zones;

	}

@ResponseBodyを使用するためjackson-core-asl-1.8.7を導入する.jarとjackson-mapper-asl-1.8.7.JAr,mvc.xmlファイルにはコードが必要です.
 
 
<bean

		class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">

		<property name="webBindingInitializer">

			<bean class="com.building.controller.BindingInitializer" />//         

		</property>

		<property name="messageConverters">

			<ref bean="jsonHttpMessageConverter" />//   @responseBody  json   

		</property>

	</bean>

	<bean id="jsonHttpMessageConverter"

		class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />