把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 汉字字节判断
Aug 01 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 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
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
Python设计模式之工厂模式简单示例
2018/01/09 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Django之路由层的实现
2019/09/09 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python各种扩展名区别点整理
2020/02/27 Python
html5使用canvas画一条线
2014/12/15 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
文秘自荐信
2013/10/20 职场文书
公司出纳岗位职责
2013/12/07 职场文书
小学庆六一活动方案
2014/02/28 职场文书
2014年协会工作总结
2014/11/22 职场文书
质量保证书怎么写
2015/02/27 职场文书
开业庆典致辞
2015/08/01 职场文书
退伍军人感言
2015/08/01 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书