把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 相关文章推荐
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
js获取checkbox值的方法
Jan 28 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
javascript的BOM
May 03 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
JS数组方法some、every和find的使用详情
Oct 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
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
用Python从零实现贝叶斯分类器的机器学习的教程
2015/03/31 Python
django 创建过滤器的实例详解
2017/08/14 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
介绍一下#error预处理
2015/09/25 面试题
什么是网络协议
2016/04/07 面试题
大学生2014全国两会学习心得体会
2014/03/10 职场文书
奠基仪式主持词
2014/03/20 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
收入证明怎么写
2015/06/12 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL