把jquery 的dialog和ztree结合实现步骤_jquery

第一步:先准备好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" />

时间: 2024-07-28 21:29:55

把jquery 的dialog和ztree结合实现步骤_jquery的相关文章

把jquery 的dialog和ztree结合实现步骤

首先准备好juqury-ui.ztree 的js文件和css 文件,接下来的步骤祥看本文希望对大家有所帮助   第一步:先准备好juqury-ui.ztree 的js文件和css 文件 第二步:example.jsp文件代码中写 复制代码 代码如下: ..引入jqueryui.ztree 的js和css文件 <body> <button value="点击弹出树的dialog对话框" onclick ="getTree()"/> <di

jQuery实现dialog设置focus焦点的方法_jquery

本文实例讲述了jQuery实现dialog设置focus焦点的方法.分享给大家供大家参考.具体分析如下: 当弹出对话框,默认我们应该将焦点定位到输入的文本框,但是在dialog.show()之前写上$("#txtGroupName").focus();无法生效. 查看jQuery的官方文档后,发现dialog提供了一个focus的参数,ok,试试先~~ //显示新建项目群组对话框 function showCreateProjectGroupDialog(i) { $("#l

jQuery EasyUI Dialog拖不下来如何解决_jquery

使用jquery easyui可以很容易的创建很炫的前台页面,最近在使用过程中发现dialog存在一个问题:  用户将dialog拖出页面后,dialog就不能拖下来了,除非要重新打开页面,这个问题对于用户体验来说是非常重要的, 所以就开始研究easyu API看看有没有相应的函数或者事件去处理,结果发现没有现成,只好自己想了个办法: 思路如下:           使用panel的onOpen事件,取得diglog的原始left和top           当用户在拖动dialog过程中,使用

jquery ui dialog里调用datepicker的问题_jquery

解决思路:修改样式表里z-index的值 解决办法: 复制代码 代码如下: beforeShow: function (i,e) { var z = jQuery(i).closest(".ui-dialog").css("z-index") + 4; e.dpDiv.css('z-index', z); }

如何使用jQuery来处理图片坏链具体实现步骤_jquery

今天我为大家讲解一个页面开发过程中的一个小技巧:如何处理裂图 也就是说如果这个图片没有加载成功了会怎么办? 第一步:HTML页面里: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>gbin1</title> <meta charset=utf-8 /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.

使用jquery mobile做幻灯播放效果实现步骤_jquery

使用jquery mobile,可以很容易实现幻灯播放效果,下面讲解下. 1.引入相关的jqury mobile类库 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" />

Jquery UI震动效果实现原理及步骤_jquery

如果你想你的博客页面某些部分引起读者的注意,你可以使这些部分震动,如广告,今天这篇文章将介绍怎样使你的页面中的元素震动起来. 要达到这个目的我们需要使用到Jquery和Jquery UI. 首先让我创建一个震动块,可以是图片,也可以是普通的dom元素,如div.span等,把元素的id命名为shake,这里可以任意命名. 我们用图片如下: 复制代码 代码如下: <img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/logo-jquery

jquery ui dialog实现弹窗特效

  今天我们用jquery ui dialog来做一个弹窗特效.我们先看下效果截图: 我们可以看到,点击的时候,弹窗出现,而且这个弹窗是居中的,还是可以拖动的...实现这一切,只要以下代码: 我们可以看到,我对pop这个div,实现的方式是让它不要autoopen,点击的时候,我只要一句dialog,open就搞定了,借助于jquery ui,我们做弹窗就是这么简单...当然了,大家可以看到,我还有一个插入数据的功能,这个功能,我采用了jquery 的appendto: 我先通过变量获取值,接着

jQuery实现dialog设置focus焦点的方法

 本文实例讲述了jQuery实现dialog设置focus焦点的方法.分享给大家供大家参考.具体分析如下: 当弹出对话框,默认我们应该将焦点定位到输入的文本框,但是在dialog.show()之前写上$("#txtGroupName").focus();无法生效. 查看jQuery的官方文档后,发现dialog提供了一个focus的参数,ok,试试先~~ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25