把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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
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
实现获取http内容的php函数分享
2014/02/16 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
win与linux系统中python requests 安装
2016/12/04 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
selenium+python实现自动登录脚本
2018/04/22 Python
python 实现dict转json并保存文件
2019/12/05 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
印度在线杂货店:bigbasket
2018/08/23 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
西部世纪面试题
2014/12/05 面试题
Overload和Override的区别
2012/09/02 面试题
高职助产应届生自荐信
2013/09/24 职场文书
中学生自我鉴定
2014/02/04 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
oracle通过存储过程上传list保存功能
2021/05/12 Oracle