js功能有：全选、弹出对话框、使用json传输ajax数据；不想在写多余的文字了，直接上代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>yk test</title>

<link rel="stylesheet" type="text/css" href="http://www.huimg.cn/app/baikesurvey/css/baikeSurveyCSS.css" />

<script type="text/javascript" src="http://www.huimg.cn/lib/jquery-1.7.min.js"></script>

<script src="http://www.huimg.cn/lib/jquery.dialog-0.8.min.js?

10131624" type="text/javascript"></script>

<script src="/admin/js/weiboWidget.js" type="text/javascript"></script>

</head>

<body>

	<h3 style="text-align: center;">test操作</h3>

	<div class="search-s">

		<form action="/weiboWidget.do?action=show" method="post">

			名称：<input type="text" name="docTitle" id="docTitle" value="${docTitle }" />    UID：<input type="text" name="uid" id="uid" value="${uid }" />    <input type="submit" class="btn-b" value="查询" />    <input type="button" class="btn-b" value="重置"

				onclick="resetData()" />

		</form>

	</div>

	   

	<b>信息列表</b>   

	<input type="button" class="btn-b" value="删除" onclick="deleteData()" />   

	<input type="button" class="btn-b" value="加入" onclick="openAddWin()" />

	</br>

	</br>

	<div class="slist">

		<table>

			<tr>

				<th width="80" align="center"><input type="checkbox" id="checkAll" onclick="selectAll()" /> <b>全选</b></th>

				<th width="100" align="center">词条名</th>

				<th width="100" align="center">UID</th>

				<th width="140" align="center">操作</th>

			</tr>

			<c:if test="${count > 0 }">

				<c:forEach var="model" items="${weibos}">

					<tr>

						<td bgcolor="#ffffff" align="center"><input type="checkbox" name="id_list" value="${model.ID };${model.OBJECT_ID }" /></td>

						<td align="center"><a href="http://www.baike.com/wiki/${model.OBJECT_ID }" target="_blank">${model.OBJECT_ID }</a></td>

						<td align="center">${model.PARAM_VALUE}</td>

						<td align="center"><a href="#" onclick="javascript:openEditWin('${model.ID}');">编辑</a>

						</td>

					</tr>

				</c:forEach>

			</c:if>

			<c:if test="${count < 1 }">

				<tr>

					<td align="center" nowrap="nowrap" colspan="11"><font style='font-weight:bolder;' color='red'>暂无相关数据</font></td>

				</tr>

			</c:if>

		</table>

		</br>

		<div class="page-navi">共计 ${count} 条</div>

		<c:if test="${pagePanel != null}">

			<div class="page-navi">${pagePanel}</div>

		</c:if>

	</div>

	<!-- 弹出窗体 -->

	<div class="hudong_dialog bluebox" id="dialog_weibo" style="display: none; position: absolute; z-index: 2030; width: 440px; border: 5px solid rgb(102, 102, 102); left: 270px; top: 131px;">

		<h2 id="win_Title" class="title" style="cursor: move;">加入操作</h2>

		<input id="win_action" type="hidden" name="action" value="add" /> <input id="win_id" type="hidden" name="id" />

		<div class="content" >

			<table  style="height: 150px;border: 0;">

				<tr>

					<td>名称：</td>

					<td><input type="text" id="win_docTitle" name="docTitle" /></td>

				</tr>

				<tr>

					<td>UID：</td>

					<td><input type="text" id="win_uid" name="uid" /></td>

				</tr>

					<tr>

					<td> </td>

				</tr>

			</table>

		</div>

		<div class="button">

			<input type="button" class="ok" name="ok" onclick="save()" value="确定"> <input type="button" class="cancel" name="cancel" onclick="closeWin()" value="取消">

		</div>

		<img class="close" style="" onclick="closeWin()">

	</div>

</body>

</html>
/**

 * 全选

 *

 */

function selectAll() {

	var selectall = document.getElementById("checkAll");

	var checkboxid = document.getElementsByName("id_list");

	if (selectall.checked == true) {

		for ( var i = 0; i < checkboxid.length; i++) {

			checkboxid[i].checked = true;

		}

	} else {

		for ( var i = 0; i < checkboxid.length; i++) {

			checkboxid[i].checked = false;

		}

	}

}

/**

 * 批量删除操作

 *

 */

function deleteData() {

	var idList = document.getElementsByName("id_list");

	var ids = "";

	var docTitles = "";

	// 检查是否选择内容

	for (i = 0; i < idList.length; i++) {

		if (idList[i].checked) {

			var temp = idList[i].value.split(";");

			ids += temp[0] + ",";

			docTitles += temp[1] + ",";

		}

	}

	if (ids == "") {

		alert("请选择纪录！

");

	} else {

		$.post("/weiboWidget.do?

action=delete&" + new Date(), {

			'ids' : ids,

			'docTitles' : docTitles

		}, function(data) {

			window.location.href = "/weiboWidget.do?action=show";

			return false;

		});

	}

}

/**

 * 关闭窗体同一时候清空from表单内容

 */

function closeWin() {

	// 初始化编辑表单

	$("#win_action").val("");

	// 设置编辑ID

	$("#win_id").val("");

	// 设置名称

	$("#win_docTitle").val("");

	// 设置uid

	$("#win_uid").val("");

	$("#dialog_weibo").hide();

}

/**

 * 保存加入或编辑的数据

 */

function save() {

	// 保存前验证

	var docTitle = $("#win_docTitle").val();

	var uid = $("#win_uid").val();

	if (docTitle != "" && uid != "") {

		$.ajax({

			dataType : 'json',

			type : 'POST',

			url : '/weiboWidget.do',

			data : {

				'action' : $("#win_action").val(),

				'id' : $("#win_id").val(),

				'docTitle' : $("#win_docTitle").val(),

				'uid' : $("#win_uid").val(),

			},

			success : function(data) {

				if (data.flag == 1) {

					alert(data.msg);

					window.location.href = "/weiboWidget.do?action=show";

				} else {

					alert(data.msg);

				}

				return false;

			},

			error : function() {

				alert("因为网络问题，保存数据失败。");

				return false;

			}

		});

	} else {

		alert("名称和id不能为空。");

		return false;

	}

}

/**

 * 验证窗体是否已打开

 *

 * @param operType

 * @returns {Boolean}

 */

function checkingIsOpenWin(operType) {

	var deiplay = $("#dialog_weibo").css("display");

	if ("block" == deiplay) {

		if ("addOper" == operType) {

			alert("加入窗体已打开！

");

		} else if ("editOper" == operType) {

			alert("编辑窗体已打开!");

		}

		return false;

	}

	return true;

}

// 打开加入窗体

function openAddWin() {

	if (checkingIsOpenWin("addOper")) {

		$('#win_Title').text('加入');

		$("#win_action").val('add');

		$("#win_docTitle").val("");

		$("#win_uid").val("");

		$("#dialog_weibo").show();

	}

	return false;

}

// 打开编辑窗体

function openEditWin(id) {

	if (checkingIsOpenWin("editOper")) {

		$.ajax({

			dataType : "json",

			type : "POST",

			url : "/weiboWidget.do?

action=ajaxLoadWeibo",

			data : {

				'id' : id

			},

			success : function(data) {

				if (data.flag == 1) {

					// 初始化编辑表单

					$("#win_action").val('modify');

					$('#win_Title').text('编辑');

					$("#win_id").val(data.id);

					$("#win_docTitle").val(data.docTitle);

					$("#win_uid").val(data.uid);

					// 显示编辑窗体

					$("#dialog_weibo").show();

				} else {

					alert(data.msg);

				}

				return false;

			},

			error : function() {

				alert("因为网络问题，临时无法改动操作,请稍后再试。");

				return false;

			}

		});

	}

	return false;

}

/**

 * 重置搜索输入

 */

function resetData() {

	$("#docTitle").val("");

	$("#uid").val("");

}

转载请指明出处：http://blog.csdn.net/yangkai_hudong

一个js编写全选、弹出对话框、ajax-json的案例的更多相关文章

  1. JS编写全选，复选按钮

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. js弹出对话框的三种方式（转）

    原文地址:https://www.jb51.net/article/81376.htm javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prom ...

  3. JS弹出对话框的三种方式

    JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...

  4. js弹出对话框的方法总结

    九种js弹出对话框的方法总结,需要的朋友可以参考一下 [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE=" ...

  5. js 弹出对话框的方法总结

    原文:http://www.cnblogs.com/xiaofengfeng/archive/2012/10/20/2732784.html <!DOCTYPE html PUBLIC &quo ...

  6. 确认（confirm 消息对话框）语法：confirm(str); 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)

    确认(confirm 消息对话框) confirm 消息对话框通常用于允许用户做选择的动作,如:"你对吗?"等.弹出对话框(包括一个确定按钮和一个取消按钮). 语法: confir ...

  7. python selenium-webdriver 处理JS弹出对话框（六）

    在实际系统中,在完成某些操作时会弹出对话框来提示,主要分为"警告消息框","确认消息框","提示消息对话"三种类型的对话框. 1.警告消息框 ...

  8. UI设计， 弹出对话框 设计（区分强调按钮和普通按钮，给用户一个 正向建议的强调按钮）

    在UI设计时,经常会需要 设计 弹出对话框,以下是个样式设计: 0.标准对话框 说明 Title space : 标题区 contents space : 内容区 function space: 功能 ...

  9. JavaScript中的三种弹出对话框

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性 ...

随机推荐

  1. android学习——GestureDetector.OnGestureListener 详解

    Android Touch Screen 与传统Click Touch Screen不同,会有一些手势(Gesture),例如Fling,Scroll等等.这些Gesture会使用户体验大大提升.An ...

  2. windows快捷键命令汇总整理

        访问当前屏幕的设置,打开"设置"栏 按 Windows 徽标键+"i"打开当前屏幕(例如,"开始".桌面或 Windows 应用)的 ...

  3. InstallShield常用prq文件的下载地址

    VC 2010 redist X86: http://saturn.installshield.com/is/prerequisites/microsoft visual c++ 2010 redis ...

  4. Python 类 --基础与要点

    1:2.x与3.x区别: 2.x:老式类,都继承自object,继承机制为深度优先 3.x:新式类不需要写(object),继承机制为广度优先 2:类说明: 在定义类下用""&qu ...

  5. Java NIO框架Netty教程（一） – Hello Netty

    先啰嗦两句,如果你还不知道Netty是做什么的能做什么.那可以先简单的搜索了解一下.我只能说Netty是一个NIO的框架,可以用于开发分布式的Java程序.具体能做什么,各位可以尽量发挥想象.技术,是 ...

  6. Android(通用机能)

    数据存储 本地数据存在都是私有化的. 共享方法1是构造数据源组件.方法2将数据放入扩展存储设备. Mashup 服务组件默认没有运行在独立进程或线程中,因此费时操作一般需要起线程.可配置指定新进程. ...

  7. ImportError No module named memcache

    ImportError: No module named memcache 没有找到windows下的memcache,我们就用linux下的包来安装 先下载memcache linux下的安装包 f ...

  8. IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

    E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...

  9. 在YouCompleteMe+Syntastic中添加和取消对C++11的支持

    添加对c++11的支持: /.vimrc中添加: let g:syntastic_cpp_compiler = 'g++'  "change the compiler to g++ to s ...

  10. FileInputStream

    InputStream 基类,抽象类 FileInputStream 读取文件的字节流 BufferedInputStream 缓冲输入字符流 package file; import java.io ...