把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 相关文章推荐
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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迭代器实现斐波纳契数列的函数
2013/11/12 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
解决laravel session失效的问题
2019/10/14 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
vue实现模态框的通用写法推荐
2018/02/26 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python中defaultdict的用法详解
2017/06/07 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
Python如何实现定时器功能
2020/05/28 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
淘宝店铺营销方案
2014/02/13 职场文书
村庄绿化方案
2014/05/07 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
文明礼仪主题班会
2015/08/13 职场文书
《穷人》教学反思
2016/02/19 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Python制作表白爱心合集
2022/01/22 Python