把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 js cookie的存储,获取和删除
Dec 29 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python实现简单遗传算法
2020/09/18 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
《三顾茅庐》教学反思
2014/04/10 职场文书
英语系毕业生求职信
2014/07/13 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
家属答谢词
2015/01/05 职场文书
保管员岗位职责
2015/02/14 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
Python Parser的用法
2021/05/12 Python
vue基于Teleport实现Modal组件
2021/05/31 Vue.js