一個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
相關文章
- javascript中的彈出對話方塊JavaScript
- 原生js實現的點選彈出螢幕居中對話方塊效果JS
- TWebBrowser禁止彈出Alert對話方塊Web
- JavaScript彈出儲存對話方塊JavaScript
- 給應用程式加個彈出對話方塊
- Java 中彈出對話方塊的幾種方式Java
- Java在Swing中如何實現彈出一個對話方塊的效果?Java
- 關於bootstrap彈出二級對話方塊的使用boot
- 一個Flex 對話方塊的坑Flex
- 一對一直播app開發,自定義彈出對話方塊的樣式APP
- [MFC]選擇目錄對話方塊和選擇檔案對話方塊
- Delphi中點選網頁彈出的Alert對話方塊的確定按鈕網頁
- 直播視訊app原始碼,底部彈出的列表對話方塊APP原始碼
- 用VB編寫一個彈出選單類 (轉)
- iOS專案開發實戰——彈出提示對話方塊iOS
- js核取方塊全選和取消全選效果JS
- 資料夾選擇對話方塊 JS實現(轉)JS
- VB.net MessageBox彈出的確認對話方塊點選確定按鈕
- JS編寫的俄羅斯方塊 (轉)JS
- ASP.NET_頁面中彈出對話方塊幫助類ASP.NET
- win10安裝軟體彈出的那個對話方塊怎麼關掉Win10
- 常用元件 / 對話方塊及選單元件
- 用匯編輕鬆地寫基於對話方塊的程式 (轉)
- 【Qt 專欄】檔案對話方塊 檔案的彈窗選擇-QFileDialogQT
- JS實現核取方塊全選反選JS
- 編輯Android程式遊戲對話方塊Android遊戲
- 實現對gridview刪除行時彈出確認對話方塊的一種簡單方法View
- 自定義一個簡單的載入對話方塊
- Android通知之多選對話方塊通知Android
- react.js自定義pc桌面端對話方塊|react仿layer彈窗ReactJS
- js特效 對話方塊 懸浮箭頭JS特效
- #在ios9及以上系統中建立對話方塊並彈出iOS
- 關於showModalDialog()對話方塊點選按鈕彈出新頁面的問題
- 利用Layer元件彈出多個對話方塊(非巢狀)與關閉及重新整理元件巢狀
- QT常用控制元件(一)——選單欄和對話方塊QT控制元件
- c#中的模態對話方塊和非模態對話方塊C#
- Android通知之單選對話方塊通知Android
- 直播平臺原始碼,簡單實現 彈出確認 取消對話方塊原始碼