当前位置: 代码迷 >> JavaScript >> jQuery UI插件在dialog中展示Ajax获取的json数据
  详细解决方案

jQuery UI插件在dialog中展示Ajax获取的json数据

热度:454   发布时间:2012-10-31 14:37:32.0
jQuery UI插件在dialog中显示Ajax获取的json数据

最近一直在学习jQuery,其中的一款插件引起了我的注意:jQuery UI(官方网站)

今天学习的是其中的dialog部分,弹出对话框是web设计中经常出现的内容,jQueryUI插件的该功能非常强大提供了非常多的选项和事件处理(Dialog Options),特别是可以将设计在网页中的内容作为弹出框的内容。

在这一篇博文中,我就用一个自己写的例子来实践一下dialog的使用(这个例子包含了jQuery获取json文件的功能)。

?

首先需要引入的文件(为了方便,直接引用Google提供的资源,也可以选择直接下载到本地):

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

?

然后可以看看,body部分的设计内容:

	<div id="dialog1">
		<table>
		<thead><tr><td>姓名</td><td>性别</td><td>年龄</td><td>邮箱</td></tr></thead>
		<tbody id="Data"></tbody>
		</table>
	</div>
	<button id="showDialog">show the dialog</button>

?div的内容将会被显示在dialog中,tbody将被用于显示json数据,button用于触发显示dialog事件。

?

另外我们得准备一个json文件UserInfo.json(和网页放在同级目录下),内容如下:

[

{

"name":"王天",

"sex":"男",

"years":"12",

"email":"hello@gmail.com"

},

{

"name":"小文",

"sex":"女",

"years":"21",

"email":"xiaowen@qq.com"

}

]

?

现在就需要看看最关键的,jQuery代码了:

	$(function(){
		$("#dialog1").dialog({
			autoOpen:false,//该选项默认是true,设置为false则需要事件触发才能弹出对话框
			title:'信息列表',//对话框的标题
			width:400,//默认是300
			modal:true//设置为模态对话框
		});
		$("#showDialog").click(function(){
			getData();//获取json数据
			$("#dialog1").dialog('open');//设置为‘open’时将显示对话框
		});
		function getData(){//获取json数据的函数
			$.getJSON("UserInfo.json",function(data){
				$("#Data").empty();//先清空tbody
				var strHTML = "";
				$.each(data,function(InfoIndex,Info){//遍历json里的数据
					strHTML += "<tr>";
					strHTML += "<td>"+Info["name"]+"</td>";
					strHTML += "<td>"+Info["sex"]+"</td>";
					strHTML += "<td>"+Info["years"]+"</td>";
					strHTML += "<td>"+Info["email"]+"</td>";
					strHTML += "</tr>";
				});
				$("#Data").html(strHTML);//显示到tbody中
			});
		}
?

大功告成,这样就可以在弹出框中看到json传来的表格数据了,弹出框的内容框架是提前写好到body标签里的。

  相关解决方案