把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中的排序算法代码
Feb 22 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 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中动态修改ini配置
2014/10/14 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python pip配置国内源的方法
2020/02/14 Python
python的help函数如何使用
2020/06/11 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
会计专业导师推荐信
2014/03/08 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
2014年优秀党员材料
2014/12/18 职场文书
员工福利申请报告
2015/05/15 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
git中cherry-pick命令的使用教程
2022/06/25 Servers