管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

把jquery 的dialog和ztree结合实现步骤

　　第一步：先准备好juqury-ui、ztree 的js文件和css 文件

　　第二步：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>

　　第三步：后台提供数据

　　

复制代码 代码如下:

　　@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" />

教程首页 更多教程