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


Posted in Javascript onAugust 02, 2013

第一步:先准备好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" />
Javascript 相关文章推荐
JS实现当前页居中分页效果的方法
Jun 18 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 #Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 #Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 #Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 #Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 #Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 #Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 #Javascript
You might like
JAVA/JSP学习系列之六
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php重定向的三种方法分享
2012/02/22 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python下载指定页面上图片的方法
2016/05/12 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
如何写一个自定义标签
2012/12/28 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
工程师岗位职责
2013/11/08 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
学校介绍信范文
2014/01/14 职场文书
十周年庆典策划方案
2014/06/03 职场文书
公证书格式
2015/01/23 职场文书
在校证明模板
2015/06/17 职场文书
追悼词范文大全
2015/06/23 职场文书