一个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编写全选，复选按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- js弹出对话框的三种方式（转）
原文地址:https://www.jb51.net/article/81376.htm javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prom ...
- JS弹出对话框的三种方式
JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...
- js弹出对话框的方法总结
九种js弹出对话框的方法总结,需要的朋友可以参考一下 [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE=" ...
- js 弹出对话框的方法总结
原文:http://www.cnblogs.com/xiaofengfeng/archive/2012/10/20/2732784.html <!DOCTYPE html PUBLIC &quo ...
- 确认（confirm 消息对话框）语法：confirm(str); 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)
确认(confirm 消息对话框) confirm 消息对话框通常用于允许用户做选择的动作,如:"你对吗?"等.弹出对话框(包括一个确定按钮和一个取消按钮). 语法: confir ...
- python selenium-webdriver 处理JS弹出对话框（六）
在实际系统中,在完成某些操作时会弹出对话框来提示,主要分为"警告消息框","确认消息框","提示消息对话"三种类型的对话框. 1.警告消息框 ...
- UI设计， 弹出对话框 设计（区分强调按钮和普通按钮，给用户一个 正向建议的强调按钮）
在UI设计时,经常会需要 设计 弹出对话框,以下是个样式设计: 0.标准对话框 说明 Title space : 标题区 contents space : 内容区 function space: 功能 ...
- JavaScript中的三种弹出对话框
学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性 ...
随机推荐
- 2.x最终照着教程，成功使用OpenGL ES 绘制纹理贴图，添加了灰度图
在之前成功绘制变色的几何图形之后,今天利用Openg ES的可编程管线绘制出第一张纹理. 学校时候不知道OpenGL的重要性,怕晦涩的语法.没有跟老师学习OpenGL的环境配置,现在仅仅能利用coco ...
- 初学Pexpect
概述 Pexpect 是 Don Libes 的 Expect 语言的一个 Python 实现,是一个用来启动子程序,并使用正则表达式对程序输出做出特定响应,以此实现与其自动交互的 Python 模块 ...
- Linux实现密钥登陆
公司为了安全,一直都采用密钥登陆远程SSH,现在有了自己的服务器,自己又学者配了一把,下面就是配置笔记. 1.登陆未设置密钥的Linux服务器 2.工具新建用户密钥生成向导 3.选择生成密钥的加密方式 ...
- datagrid数据导出到excel文件给客户端下载的几种方法
方法一:导出到csv文件,存放在服务器端任一路径,然后给客户下载 优点: 1.可以进行身份认证后给客户下载,如果放到非web目录就没有对应的url,客户无法随时下载. 2.也是因为生成了文件,所以占用 ...
- ASP.net导出Excel的几种方式
2.导出多个sheet页的Excel 在Office Excel 中设计好 导出的格式,然后另存为xml电子表格,然后用记事本打开保存的xml文件,复制内容放入程序Response.Write() 输 ...
- 32位PLSQL_Developer连接oracle11g_64位
1. 请将你下载的instantclient-basic-win32-10.2.0.5 文件解压.然后复制到你的数据库安装的文件夹下的producti文件夹下,我的是: E:\app\Administ ...
- 查看Linux相关信息
1."uname -a ",可显示电脑以及操作系统的相关信息. 2."cat /proc/version",说明正在运行的内核版本. 3."cat / ...
- MySql 1045错误
配置时以管理员身份运行MySQL Instance Configuration Wizard 当你登录MySQL数据库出现:Error 1045错误时(如下图),就表明你输入的用户名或密码错误被拒绝访 ...
- for 迭代器遍历list map
1.map与list区别 list是对象集合,允许对象重复. map是键值对的集合,不允许key重复 2.list 与 list<类型> list不限制类型,也就是object类型 ...
- 手机网页中的hover效果实现
js文件 function mouseout(obj) { var className ="hover"; var _ecname = obj.className; if (_ec ...