把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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
js中判断控件是否存在
Aug 25 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
jQuery实现高级检索功能
May 28 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
PHP新手上路(五)
2006/10/09 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
11个Python Pandas小技巧让你的工作更高效(附代码实例)
2019/04/30 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
python3排序的实例方法
2020/10/20 Python
Python中生成ndarray实例讲解
2021/02/22 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
财务管理专业自荐信范文
2013/12/24 职场文书
学习心得体会
2014/01/01 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
计算机实训报告总结
2014/11/05 职场文书
端午节寄语2015
2015/03/23 职场文书
劳动模范获奖感言
2015/07/31 职场文书
高中军训感想
2015/08/07 职场文书
JS的深浅复制详细
2021/10/16 Javascript
Mysql 文件配置解析介绍
2022/05/06 MySQL