把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操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
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
PHP4实际应用经验篇(6)
2006/10/09 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
12步教你理解Python装饰器
2016/02/25 Python
Python Socket传输文件示例
2017/01/16 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
Python文件操作的面试题
2013/06/22 面试题
写自荐信有哪些不宜?
2013/10/17 职场文书
教师自我评价范文
2013/12/16 职场文书
行政专员的岗位职责
2014/03/10 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
思想工作总结范文
2015/08/12 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL