把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 相关文章推荐
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
用session做客户验证时的注意事项
2006/10/09 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
ext 代码生成器
2009/08/07 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
python登陆asp网站页面的实现代码
2015/01/14 Python
Python实现二分法算法实例
2015/02/02 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
社团活动总结格式
2014/08/29 职场文书
出租房屋协议书
2014/09/14 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
文明旅游倡议书
2015/04/28 职场文书
MySQL触发器的使用
2021/05/24 MySQL