一个js编写全选弹出对话框ajax-json的案例

Posted Brenda

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个js编写全选弹出对话框ajax-json的案例相关的知识，希望对你有一定的参考价值。

   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的案例的主要内容，如果未能解决你的问题，请参考以下文章

js中addEventListener如何取消

js 用简单案例举模态对话框弹出

获取Windows10 聚焦壁纸

DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

VB如何编写简单弹出对话框的代码？

ASP如何弹出一个对话框