zoukankan      html  css  js  c++  java
  • 一个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>词条微博</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;">词条微博操作</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;  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("词条名和微博UID不能为空!");
    		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

  • 相关阅读:
    event.keycode大全(javascript) (转)
    Javascript 中的 字符串对象 toUpperCase() toString() charAt() indexOf() lastIndexOf() replace() search() substring()
    Javascript 中的 var
    Javascript 中的 Array
    super() (1)
    Javascript 中的事件
    JavaScript验证函数大全 (转)
    javascript数字验证(转)
    Javascript 中 null 与 undefined关系
    Javascript 中的 for ... in
  • 原文地址:https://www.cnblogs.com/yangkai-cn/p/4016601.html
Copyright © 2011-2022 走看看