jsp jquery 实现删除操作(无需刷新)(原创,转载请注明)
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@page import="java.sql.*"%>
<!-- author:Evangelion
structions:关于jquery无刷新删除的思路:
一个jquery的行点击函数
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css" />
<link rel="stylesheet" type="text/css" href="CSS/editTable.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="scripts/Jq/jquery-1.6.4.js"></script>
<script type="text/javascript" src="scripts/js/WdatePicker.js"></script>
<!-- <script type="text/javascript" >
$(document).ready(function() {
$("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick });
});
PageClick = function(pageclickednumber) {
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick });
$("#result").html("Clicked Page " + pageclickednumber);
}
</script>-->
<script type="text/javascript">//行点击js方法 jquery实现, isSelected是一个标志,初始值为false然后在点击行之后为true,点击删除button时候调用的js的delWindow时候就
//可以判断是否选中一行,若没选中则使用if语句alert()然后return。这是一个思路,其实可以直接判断点击内容是否为空来判断是否选中行(选)。
var isSeclected = false;
$(function(){
$("tbody>tr").click(function() {
$(this)
.addClass("selected")
.siblings().removeClass("selected");
isSeclected = true;
});})
</script>
<script type="text/javascript">
function addWindow()
{
window.open ("","Sample","fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, copyhistory=no,width=350,height=140,left=200,top=300");
}
function delWindow()
{
//alert($("tr.selected>td").eq(1).text());
//获得的是在table中选中的行
if(!$("tr.selected").text())
{
alert("没有行被选中");
return;
}
if(!confirm("是否将此信息删除?")) return;
//在选中行中获取单元格的值。
s_boss_code=$("tr.selected>td").eq(1).text();
$("tr.selected").remove();
alert("删除成功!")
// alert(s_boss_code); //正确显示
//用来将获取到的单元格的值传送到jsp中的java代码中,可以在java中直接使用request.getParameter("px")来获取js中的值。(前后台交互,js负责的是前台传送到后台jsp中)
window.location = 'index.jsp?px='+s_boss_code;
}
</script>
</head>
<body>
<div>
套餐名称:
<input type="text" name="plan_name" />
BOSS编码:
<input type="text" name="boss_code" />
套餐类型:
<select name="plan_type"></select>
品牌:
<select name="brand_id"></select>
开始时间:
<input name="plan_startdate" class="Wdate" type="text"
onfocus="WdatePicker()" />
结束时间:
<input name="plan_enddate" class="Wdate" type="text"
onfocus="WdatePicker()" />
<input name="info" type="button" value="查询" />
<input name="edit" type="button" value="修改"/>
<input name="del" type="button" value="删除" onclick="delWindow()"/>
<input name="add" type="button" value="添加" onclick="addWindow()">
</div>
<table border="1">
<thead>
<tr>
<th width="200">
套餐名称
</th>
<th width="200">
BOSS编码
</th>
<th width="200">
套餐类型
</th>
<th width="200">
品牌
</th>
<th width="200">
开始时间
</th>
<th width="200">
结束时间
</th>
</tr>
</thead>
<%
String s_boss_code=request.getParameter("px");
int pageSize=10;
int pageNow=1;
int rowCount=0;
int pageCount=0;
String s_pageNow=request.getParameter("pageNow");
if(s_pageNow!=null)
{
pageNow=Integer.parseInt(s_pageNow);
}
Connection conn = null;
Statement stmt = null,stmt1=null,stmt2=null,stmt3=null;
//ResultSet rs = null;
ResultSet rsCount=null;
ResultSet rsRownum=null;
ResultSet reUpdate=null;
try {//System.out.println(pageSize);
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
conn = DriverManager.getConnection(
"jdbc:oracle:thin:@:orcl", "",
"");
//stmt = conn.createStatement();
stmt1=conn.createStatement();
stmt2=conn.createStatement();
stmt3=conn.createStatement();
System.out.println(s_boss_code);
if(request.getParameter("px")!=null)
{
stmt3.executeUpdate("delete from pmp_plan t where boss_code='"+s_boss_code+"'");
}
//rs = stmt.executeQuery("select plan_name,boss_code,plan_type,brand_id,plan_startdate,plan_enddate from pmp_plan t ");
rsCount=stmt1.executeQuery("select count(*) from pmp_plan t ");
rsRownum=stmt2.executeQuery("select plan_name,boss_code,plan_type,brand_id,plan_startdate,plan_enddate from(select rownum rown,plan_name,boss_code,plan_type,brand_id,plan_startdate,plan_enddate from pmp_plan t where rownum<="+pageNow*pageSize+")where rown>"+(pageNow-1)*pageSize);
out.println("<tbody>");
if(rsCount.next()){ rowCount=rsCount.getInt(1);}
//System.out.println(rowCount);
//System.out.println(rsRownum.next());
while (rsRownum.next()) {
out.println("<tr>");
out.println("<td id='plan_name'>"
+ rsRownum.getString("plan_name") + "</td>");
out.println("<td id='boss_code'>"
+ rsRownum.getString("boss_code") + "</td>");
out.println("<td id='plan_type'>"
+ rsRownum.getString("plan_type") + "</td>");
out.println("<td id='brand_id'>" + rsRownum.getString("brand_id")
+ "</td>");
out.println("<td id='plan_startdate'>"
+ rsRownum.getString("plan_startdate") + "</td>");
out.println("<td id='plan_enddate'>"
+ rsRownum.getString("plan_enddate") + "</td>");
out.println("</tr>");
}
}
catch (Exception ex) {
out.println(ex.toString());
} finally {
//rs.close();
rsCount.close();
//rsRownum.close();
//stmt.close();
stmt1.close();
stmt2.close();
stmt3.close();
conn.close();
}
out.println("</tbody>");
//上一页
%>
</table>
<%
if(rowCount%pageSize==0)
{
pageCount=rowCount/pageSize;
}
else
{
pageCount=rowCount/pageSize+1;
}
if(pageNow!=1)
{
out.println("<a href=index.jsp?pageNow="+(pageNow-1)+">上一页</a>");
}
for(int i=1;i<=pageCount;i++)
{
out.println("<a href=index.jsp?pageNow="+i+">["+i+"]</a>");
}
if(pageNow!=pageCount){
out.println("<a href=index.jsp?pageNow="+(pageNow+1)+">下一页</a>");
}
%>
<!-- </table>
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">增加</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a> </div>
</div>
-->
</body>
</html>