把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 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
原生js实现下拉框选择组件
Jan 20 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
如何使用PHP中的字符串函数
2006/10/09 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
php实现记事本案例
2020/10/20 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Flask-WTF表单的使用方法
2019/07/12 Python
解决python flask中config配置管理的问题
2019/07/26 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
竞选班长演讲稿
2013/12/30 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
应收账款管理制度
2015/08/06 职场文书
初中语文教学反思范文
2016/03/03 职场文书
干货分享:推荐信写作技巧!
2019/06/21 职场文书
nginx日志格式分析和修改
2022/04/28 Servers