把jquery 的dialog和ztree结合实现步骤
更新时间：2013年08月02日 16:23:47 作者：
首先准备好juqury-ui、ztree 的js文件和css 文件，接下来的步骤祥看本文希望对大家有所帮助
第一步：先准备好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" />
第二步：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" />
相关文章
jquery 操作DOM案例，实现图片的显示，需要的朋友可以参考下2012-04-04
fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。这篇文章给大家介绍jquery fadeout异步实例代码，感兴趣的朋友一起看下吧2016-08-08
下面小编就为大家带来一篇jQuery 添加样式属性的优先级别方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
本文主要介绍了jquery的代码规范。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
读取URL参数的方法各种各样不过大同小异，下面本文使用jquery来实现读取URL参数示例，感兴趣的朋友可以练练手哦2013-08-08
下面小编就为大家带来一篇用jquery获取自定义的标签属性的值简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
下面小编就为大家带来一篇浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
下面这些知识都是开发过程中，经常遇到的。所以整理了下，需要的朋友可以参考下。2009-12-12
Tooltip（提示框）是一种常见的效果，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tips。2015-07-07
用JQUERY实现全选和取消全选,减少了我们写JS的麻烦,我们再也不用写那么多代码了,给大家分享两段代码,用JQUERY实现复选框的全选和取消全选.2008-08-08
最新评论