JQuery.UI中对话框简单示例（对表格增、删、改）

wallimn

浏览: 5161422 次
性别:
来自: 北京

最近访客更多访客>>

java-007

xckouy

lengyun3566

zxjun8771

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVA、WEB开发

JQuery Dialog

基于：jquery-1.7.2.js、jquery-ui-1.8.21.custom.js
原理演示，不需要、没有服务器端的代码。

运行效果：

<!DOCTYPE html>
<html>
<head>
	<meta charset="gbk">
	<title>dialog demos</title>
	<!--根据JQuery.UI的例子改写，by wallimn, 2012-08-01-->
	<link rel="stylesheet" href="./css/base/jquery.ui.all.css">
	<script src="./js/jquery-1.7.2.js"></script>
	<script src="./js/jquery-ui-1.8.21.custom.js"></script>
	<style>
		body { font-size: 10px; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 4px; text-align: left; }
	</style>
	<script>
	$(function() {
		var name = $( "#name" ),
			email = $( "#email" ),
			password = $( "#password" ),
			rowindex = $( "#rowindex" ),
			allFields = $( [] ).add( name ).add( email ).add( password ).add( rowindex );
		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 280,
			width: 350,
			modal: true,
			buttons: {
				"Create/Edit": function() {
					if (rowindex.val()==""){//新增
						$( "#users tbody" ).append( "<tr>" +
							"<td>" + name.val() + "</td>" + 
							"<td>" + email.val() + "</td>" + 
							"<td>" + password.val() + "</td>" +
							'<td><button class="EditButton" >Edit</button><button class="DeleteButton">Delete</button></td>'+
						"</tr>" ); 
						bindEditEvent();
					}
					else{//修改
						var idx = rowindex.val();
						var tr = $("#users>tbody>tr").eq(idx);
						//$("#debug").text(tr.html());
						tr.children().eq(0).text(name.val());
						tr.children().eq(1).text(email.val());
						tr.children().eq(2).text(password.val());
					}
					$( this ).dialog( "close" );
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				//allFields.val( "" ).removeClass( "ui-state-error" );
				;
			}
		});
		
		function bindEditEvent(){
			//绑定Edit按钮的单击事件
			$(".EditButton").click(function(){
					var b = $(this);
					var tr = b.parents("tr");
					var tds = tr.children();
					//设置初始值
					name.val(tds.eq(0).text());
					email.val(tds.eq(1).text());
					password.val(tds.eq(2).text());
					
					var trs = b.parents("tbody").children();
					//设置行号，以行号为标识，进行修改。
					rowindex.val(trs.index(tr));
					
					//打开对话框
					$( "#dialog-form" ).dialog( "open" );
			});
			
			//绑定Delete按钮的单击事件
			$(".DeleteButton").click(function(){
				var tr = $(this).parents("tr");
				tr.remove();
			});
		};
		
		bindEditEvent();
		
		$( "#create-user" )
			.button()
			.click(function() {
				//清空表单域
				allFields.each(function(idx){
					this.value="";
				});
				$( "#dialog-form" ).dialog( "open" );
			});
	});
	</script>
</head>
<body>

<div class="demo">

<div id="dialog-form" title="Create/Edit User">
	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text" />
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text" />
		<input type="hidden" name="rowindex" id="rowindex" value=""/>
	</fieldset>
	</form>
</div>


<div id="users-contain">
	<h1>Existing Users:</h1>
	<table id="users">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Email</th>
				<th>Password</th>
				<th style="width:12em;">Operation</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>wallimn</td>
				<td>wallimn@sohu.com</td>
				<td>wallimn</td>
				<td><button class="EditButton" >Edit</button><button class="DeleteButton">Delete</button></td>
			</tr>
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe</td>
				<td><button class="EditButton" >Edit</button><button class="DeleteButton">Delete</button></td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user">Create new user</button>

</div><!-- End demo -->
<div id="debug">
</div>
</body>
</html>

示例整理20120801.zip (197.2 KB)
下载次数: 489

查看图片附件

6
顶

1
踩

分享到：

豆豆趣事[2012年08月] | Servlet映射地址配置

2012-08-01 21:00
浏览 14943
评论(5)
分类:Web前端
查看更多

5 楼 m635674608 2012-10-13

wallimn 写道

如你不用对话框放大、缩小的功能，可以不包含resizable.js，这样就会小点。速度会快点儿。如果全包含，我想引入一个文件与多个文件应该差别不大。

也许把。文件大小影响的比较大，数量影响的少电脑吧。

4 楼 wallimn 2012-10-13

如你不用对话框放大、缩小的功能，可以不包含resizable.js，这样就会小点。速度会快点儿。如果全包含，我想引入一个文件与多个文件应该差别不大。

3 楼 m635674608 2012-10-13

wallimn 写道

只写一个文件时，就是全都引用了。
多个写时，是按需包含。用户访问速度可能会快一点儿。其他没有区别。

刚开始我也以为是这样的。我把其他的单个文件的大小和/jquery-ui-1.8.21.custom.js文件大小对比了一下，发现差不多。
但是从性能上来讲的话，具体也知道了，因为如果只写一个文件的话，只发一次请求啊，如果写多个文件的话，要发多次请求啊，你觉得了？？？

2 楼 wallimn 2012-10-13

只写一个文件时，就是全都引用了。
多个写时，是按需包含。用户访问速度可能会快一点儿。其他没有区别。

1 楼 m635674608 2012-10-13

lz在这里使用的是<script src="./js/jquery-ui-1.8.21.custom.js">
在使用dialog的时候，好像还有一种写法，就是引用这些js文件也可以实现dialog.
jquery.dimensions.js
ui.dialog.js
ui.resizable.js
ui.mouse.js
ui.draggable.js
引用这些也可以实现dialog,请问2种引用有什么区别吗？哪种更好啊？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论