把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 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
javascript实现回到顶部特效
May 06 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 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 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
php date()日期时间函数详解
2010/05/16 PHP
php ci框架验证码实例分析
2013/06/26 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
javascript实现连续赋值
2015/08/10 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python 字符串追加实例
2019/07/20 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
给民警的表扬信
2014/01/08 职场文书
《植树问题》教学反思
2016/03/03 职场文书