把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 相关文章推荐
ExtJS 简介 让你知道extjs是什么
Dec 29 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
简单实现jquery焦点图
Dec 12 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 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
PHP下常用正则表达式整理
2010/10/26 PHP
域名和cookie问题(域名后缀)
2012/10/10 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
js实现黑白div块画空心的图形
2018/12/13 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
微信小程序实现收货地址左滑删除
2020/11/18 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
财务出纳员岗位职责
2013/11/26 职场文书
小学生作文评语
2014/04/18 职场文书
材料物理专业求职信
2014/09/01 职场文书
初中家长评语和期望
2014/12/26 职场文书
蓬莱阁导游词
2015/02/04 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
工程合作意向书范本
2015/05/09 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书