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="重置" οnclick="resetData()" /> </form> </div> <b>信息列表</b> <input type="button" class="btn-b" value="删除" οnclick="deleteData()" /> <input type="button" class="btn-b" value="加入" οnclick="openAddWin()" /> </br> </br> <div class="slist"> <table> <tr> <th width="80" align="center"><input type="checkbox" id="checkAll" οnclick="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="#" οnclick="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" οnclick="save()" value="确定"> <input type="button" class="cancel" name="cancel" οnclick="closeWin()" value="取消"> </div> <img class="close" style="" οnclick="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
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
