手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >把jquery 的dialog和ztree结合实现步骤
把jquery 的dialog和ztree结合实现步骤
摘要:第一步:先准备好juqury-ui、ztree的js文件和css文件第二步:example.jsp文件代码中写复制代码代码如下:..引入jq...

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

第二步:example.jsp文件代码中写

复制代码 代码如下:

..引入jqueryui、ztree 的js和css文件

<body>

<button value="点击弹出树的dialog对话框" onclick ="getTree()"/>

<div id="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 />//这里为用户自定义的

</property>

<property name="messageConverters">

<ref bean="jsonHttpMessageConverter" />//这里为@responseBody提供json的支持

</property>

</bean>

<bean id="jsonHttpMessageConverter"

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

【把jquery 的dialog和ztree结合实现步骤】相关文章:

jQuery插件pagewalkthrough实现引导页效果

jquery实现动态改变div宽度和高度

jQuery实现返回顶部功能

探索angularjs+requirejs全面实现按需加载的套路

JS的IE和Firefox兼容性集锦

jQuery实现延迟跳转的方法

jQuery使用zTree插件实现树形菜单和异步加载

javascript结合Flexbox简单实现滑动拼图游戏

jQuery插件jRumble实现网页元素抖动

jquery实现弹出层效果实例

精品推荐
分类导航