把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事件串连执行多个处理过程的方法
Mar 09 Javascript
Js动态创建div
Sep 25 Javascript
flash javascript之间的通讯方法小结
Dec 20 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 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缓存类代码(附详细说明)
2011/06/09 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python实现名片管理系统
2018/11/29 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python主要用于哪些方向
2020/07/05 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
护理专业自我鉴定
2014/01/30 职场文书
秋天的雨教学反思
2014/04/27 职场文书
音乐之声观后感
2015/06/04 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android