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("");}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
