把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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
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
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
PHP错误处理函数
2016/04/03 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Golang 与python中的字符串反转
2017/07/21 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
Python装饰器知识点补充
2018/05/28 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
什么是GWT的Module
2013/01/20 面试题
电话销售经理岗位职责
2013/12/07 职场文书
开办饭店创业计划书
2013/12/28 职场文书
高中生期末评语大全
2014/01/28 职场文书
委托公证书
2014/04/08 职场文书
仓库规划计划书
2014/04/28 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
七年级作文之冬景
2019/11/07 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python