57-005-3 bootstrap实现一个简单的项目案例--新闻操作（基于jsp无刷新异步操作）

DROP DATABASE IF EXISTS ms ;

-- 创建数据表

CREATE DATABASE ms CHARACTER SET UTF8 ;

-- 使用数据库

USE ms ;

-- 删除数据表

DROP TABLE IF EXISTS news ;

-- 创建数据表

CREATE TABLE news (

nid   INT AUTO_INCREMENT ,

title  VARCHAR(50) ,

pubdate DATETIME ,

content TEXT ,

CONSTRAINT pk_nid PRIMARY KEY (nid)

)type=innodb;

private static final String DBDRIVER = "org.gjt.mm.mysql.Driver" ;

private static final String DBURL = "jdbc:mysql://localhost:3306/ms" ;

private static final String USER = "root" ;

private static final String PWD = "o" ;

private Connection conn ;

public DatabaseConnection(){

try {

Class.forName(DBDRIVER);

conn = DriverManager.getConnection(DBURL, USER, PWD);

}catch(Exception e){

e.printStackTrace();

}

}

public Connection getConnection(){

return conn ;

}

public void close(){

if(conn != null){

try {

conn.close();

} catch (SQLException e) {

e.printStackTrace();

}

}

}

}

private Integer nid ;

private String title ;

private String content ;

private Date pubdate ;

public Integer getNid() {

return nid;

}

public void setNid(Integer nid) {

this.nid = nid;

}

public String getTitle() {

return title;

}

public void setTitle(String title) {

this.title = title;

}

public String getContent() {

return content;

}

public void setContent(String content) {

this.content = content;

}

public Date getPubdate() {

return pubdate;

}

public void setPubdate(Date pubdate) {

this.pubdate = pubdate;

}

}

public boolean doCreate(News vo) throws Exception ;

public boolean doUpdate(News vo) throws Exception ;

public boolean doRemoveBatch(Set<Integer> nids) throws Exception ;

public News findById(Integer nid)throws Exception ;

public List<News> findAll(Integer currentPage,Integer lineSize)throws Exception ;

public Integer getAllCount()throws Exception ;

}

private Connection conn ;

private PreparedStatement pstmt ;

String sql = null ;

public NewsDAOImpl(Connection conn){

this.conn = conn ;

}

public boolean doCreate(News vo) throws Exception {

sql = "INSERT INTO news(title,pubdate,content) VALUES(?,?,?)" ;

pstmt = conn.prepareStatement(sql) ;

pstmt.setString(1,vo.getTitle());

pstmt.setDate(2,new java.sql.Date(vo.getPubdate().getTime()));

pstmt.setString(3,vo.getContent());

return pstmt.executeUpdate()>0;

}

public boolean doUpdate(News vo) throws Exception {

sql = "UPDATE news SET title=?,content=? WHERE nid=?" ;

pstmt = conn.prepareStatement(sql) ;

pstmt.setString(1,vo.getTitle());

pstmt.setString(2,vo.getContent());

pstmt.setInt(1,vo.getNid());

return pstmt.executeUpdate()>0;

}

public boolean doRemoveBatch(Set<Integer> nids) throws Exception {

if(nids.size() == 0)

return false ;

StringBuffer sql = new StringBuffer("DELETE FROM news WHERE nid IN (");

Iterator<Integer> iter = nids.iterator() ;

while(iter.hasNext()){

sql.append(iter.next()+",") ;

}

sql.delete(sql.length()-1,sql.length()).append(")") ; //删除最后那个逗号

pstmt = conn.prepareStatement(sql.toString()) ;

return pstmt.executeUpdate() == nids.size(); //不能用"> 0"这样不能保证所有的都能被删除

}

public List<News> findAll(Integer currentPage, Integer lineSize) throws Exception {

sql = "SELECT nid,title,content,pubdate FROM news LIMIT ?,? " ;

pstmt = conn.prepareStatement(sql) ;

pstmt.setInt(1,(currentPage-1)*lineSize);

pstmt.setInt(2,lineSize);

List<News> list = new ArrayList<News>() ;

ResultSet rs = pstmt.executeQuery();

while(rs.next()){

News news = new News();

news.setNid(rs.getInt("nid"));

news.setTitle(rs.getString("title"));

news.setContent(rs.getString("content"));

news.setPubdate(rs.getDate("pubdate"));

list.add(news) ;

}

return list;

}

public Integer getAllCount() throws Exception {

sql = "SELECT COUNT(*) FROM news" ;

pstmt = conn.prepareStatement(sql) ;

ResultSet rs = pstmt.executeQuery() ;

if(rs.next())

return rs.getInt(1);

return 0 ;

}

}

public static INewsDAO getINewsDAOInstance(Connection conn){

return new NewsDAOImpl(conn) ;

}

}

public boolean insert(News vo)throws Exception ;

public boolean delete(Set<Integer> nids)throws Exception ;

public boolean update(News vo)throws Exception ;

public Map<String,Object> list(Integer currentPage,Integer lineSize)throws Exception ;

private Connection conn ;

private DatabaseConnection db = new DatabaseConnection() ;

public NewsServiceImpl(){

conn =db.getConnection() ;

}

public boolean insert(News vo) throws Exception {

try {

return DAOFactory.getINewsDAOInstance(conn).doCreate(vo);

}catch(Exception e){

throw e ;

}finally {

db.close();

}

}

public boolean delete(Set<Integer> nids) throws Exception {

try {

return DAOFactory.getINewsDAOInstance(conn).doRemoveBatch(nids) ;

}catch(Exception e){

throw e ;

}finally {

db.close();

}

}

public boolean update(News vo) throws Exception {

try {

return DAOFactory.getINewsDAOInstance(conn).doUpdate(vo) ;

}catch(Exception e){

throw e ;

}finally {

db.close();

}

}

public Map<String, Object> list(Integer currentPage, Integer lineSize) throws Exception {

try {

Map<String,Object> map = new HashMap<String, Object>();

map.put("allCount",

DAOFactory.getINewsDAOInstance(conn).getAllCount());

map.put("selectedNews",

DAOFactory.getINewsDAOInstance(conn).findAll(currentPage,lineSize));

return map ;

}catch(Exception e){

throw e ;

}finally {

db.close();

}

}

}

public static INewsSerivce getINewsServiceInstance(){

return new NewsServiceImpl();

}

}

public class EncodingFilter implements Filter {

public void destroy() {

}

public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {

//来回都设置了编码过滤

req.setCharacterEncoding("UTF-8");

resp.setCharacterEncoding("UTF-8");

chain.doFilter(req, resp);

req.setCharacterEncoding("UTF-8");

resp.setCharacterEncoding("UTF-8");

}

public void init(FilterConfig config) throws ServletException {

}

}

public class NewsServlet extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String methodName = request.getPathInfo().substring(1); //获取输入的方法名称

try{

Method method = this.getClass().getMethod(methodName,HttpServletRequest.class,HttpServletResponse.class) ;

method.invoke(this,request,response) ;

}catch(Exception e){

e.printStackTrace();

}

if(methodName==null||methodName.equals("")){

request.getRequestDispatcher("index") ;

}else if(methodName.equalsIgnoreCase("insert")){

}else if(methodName.equalsIgnoreCase("delete")){

}else if(methodName.equalsIgnoreCase("update")){

}else if(methodName.equalsIgnoreCase("list")){

}

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request,response);

}

public void update(HttpServletRequest request,HttpServletResponse response)throws Exception{

News vo = new News() ;

vo.setTitle(request.getParameter("title"));

vo.setContent(request.getParameter("content"));

//采用页面局部刷新更改数据--Ajax

response.getWriter().print(ServiceFactory.getINewsServiceInstance().update(vo));

}

public void delete(HttpServletRequest request,HttpServletResponse response)throws ServletException{

//删除操作也是采用的异步处理

String nids = request.getParameter("ids") ;

try{

if(nids == null){

response.getWriter().print(false);

}else{

Set<Integer> ids = new TreeSet<Integer>() ;

String idSet[] = nids.split("\\|") ;

for(int x=0 ;x<idSet.length ;x++){

ids.add(Integer.parseInt(idSet[x])) ;

}

response.getWriter().print(ServiceFactory.getINewsServiceInstance().delete(ids)) ;

}

}catch(Exception e){

e.printStackTrace() ;

}

}

public void list(HttpServletRequest request,HttpServletResponse response)throws ServletException{

int lineSize = 5 ;

try {

lineSize = Integer.parseInt(request.getParameter("lineSize")) ;

}catch(Exception e){}

int currentPage = 1 ;

try {

currentPage = Integer.parseInt(request.getParameter("currentPage"));

}catch(Exception e){}

Map<String,Object> map = null ;

List<News> list = null ;

try {

map = ServiceFactory.getINewsServiceInstance().list(lineSize,currentPage) ;

if(map != null){

//数据是通过json传输的，所以定义json对象来传输数据

JSONObject obj = new JSONObject() ;

JSONArray arr = new JSONArray() ;

int allCount = (Integer)map.get("allCount") ;

list = (List<News>)map.get("selectedNews") ;

obj.put("allCount",allCount) ;

Iterator<News> iter = list.iterator() ;

while(iter.hasNext()){

JSONObject tmp = new JSONObject() ;

News vo = iter.next() ;

tmp.put("nid",vo.getNid()) ;

tmp.put("content",vo.getContent()) ;

tmp.put("title",vo.getTitle()) ;

tmp.put("pubdate",new SimpleDateFormat("yyyy-MM-dd").format(vo.getPubdate())) ;

arr.add(tmp) ;

}

obj.put("selectedNews",arr) ;

response.getWriter().print(obj) ;

}else{

response.getWriter().print(false) ;

}

} catch (Exception e) {

e.printStackTrace();

}

}

public void insert(HttpServletRequest request,HttpServletResponse response)throws Exception{

News vo = new News() ;

vo.setNid(Integer.parseInt(request.getParameter("nid")));

vo.setTitle(request.getParameter("title"));

vo.setContent(request.getParameter("content"));

vo.setPubdate(new Date());

String msg = "新闻数据增加失败！" ;

String path = request.getContextPath()+"/pages/news/news_insert.jsp" ; //跳转路径

if(ServiceFactory.getINewsServiceInstance().insert(vo)){

msg = "新闻数据增加成功！" ;

}

request.setAttribute("msg",msg) ;

request.setAttribute("path",path);

request.getRequestDispatcher("/pages/forward.jsp").forward(request,response) ;

}

}

<script type="text/javascript" >

alert(${msg}) ;

window.location="${path}" ;

</script>

<%

String path = request.getContextPath() ;

String basePath = request.getScheme()+"://"+request.getServerName()

+":"+request.getServerPort()+"/"+path ;

String insertUrl = basePath+"/pages/news/NewsServlet/insert" ;

%>

<html>

<head>

<base href="<%=basePath%>" />

<title>bootstrap综合应用</title>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width,initial-scale=1" >

<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

</head>

<body>

<!--首先定义导航条-->

<div class="container">

<div class="row">

<div class="col-md-12">

<div class="panel panel-success">

<div class="panel-heading">

<strong>增加新闻</strong>

</div>

<div class="panel-body">

<!-- 定义bootstrap样式的form表单 -->

<form action="<%=insertUrl%>" method="post" id="myForm" class="form-horizontal">

<fieldset>

<legend><label>新闻增加</label></legend>

<div class="form-group" id="titleDiv" >

<!-- 用label元素便于鼠标点击实现联动效果同时要设置for="title"才有效果 -->

<label class="col-md-3 control-label" for="title">标题:</label>

<div class="col-md-5">

<input id="title" name="title" type="text" value="test_title" placeholder="请输入标题" class="form-control">

</div>

<div class="col-md-4" id="titleSpan"></div>

</div>

<div class="form-group" id="contentDiv" >

<!-- 用label元素便于鼠标点击实现联动效果同时要设置for="content"才有效果 -->

<label class="col-md-3 control-label" for="content">新闻内容:</label>

<div class="col-md-5">

<textarea id="content" name="content"  placeholder="请输入内容" class="form-control">test_content</textarea>

</div>

<div class="col-md-4" id="contentSpan"></div>

</div>

<!-- 定义两个按钮 -->

<div class="form-group">

<div class="col-md-5 col-md-offset-3" >

<button type="submit" class="btn btn-info">发布</button>

<button type="reset" class="btn btn-info">重置</button>

</div>

</div>

</fieldset>

</form>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

var jsCommonCp = 1 ; //当前的页码

var jsCommonLs = 5 ; //每页显示数据量

var jsCommonPageSize ; //总页数

function createSplitBar(allRecorders){ //专门用于创建分页操作的

clearBar();

calcPageSize(allRecorders) ;

if(jsCommonPageSize > 1){

previousPage() ;

addBar(1)  ;

}

var seed = 3 ; //设置一个显示省略号的临界点--种子数，如果大于它则出现，否则不出现

if(jsCommonCp > seed*2){

addDetailPage() ; //增加省略号按钮

var startPage = jsCommonCp - seed ;

for(var x=startPage ; x<jsCommonCp + seed ; x++){

if(x < jsCommonPageSize){

addBar(x) ;

}

}

if(jsCommonCp+2*seed < jsCommonPageSize){

addDetailPage() ;

}

}else{

for(var x = 2 ; x < jsCommonCp+seed ; x++){

if(x < jsCommonPageSize)

addBar(x) ;

}

if(jsCommonCp+seed < jsCommonPageSize){

addDetailPage() ;

}

}

addBar(jsCommonPageSize) ;

if(jsCommonPageSize > 1){

nextPage() ;

}

}

function clearBar(){ //定义数据的清空操作

$("#pagecontrol li").remove() ;

}

function addBar(index){ //用来生成分页功能的代码,即增加页面页码标签

var liObj = $("<li></li>") ; //定义一个li元素节点对象

var aObj = $("<a style=‘cursor:pointer;‘>"+index+"</a>") ;

if(jsCommonCp == index){

liObj.addClass("active") ; //如果此页码正好为当前页则设置一个样式

}else{

aObj.on("click",function(){

jsCommonCp = index ;

loadData() ;

}) ;

}

liObj.append(aObj) ;

$("#pagecontrol").append(liObj) ;

}

function addDetailPage(){ //添加省略号按钮

var liObj = $("<li><span>...</span></li>") ;

$("#pagecontrol").append(liObj) ;

}

function previousPage(){ //在页面定义上一页按钮

var liObj = $("<li></li>") ; //定义一个li元素节点对象

var aObj = $("<a style=‘cursor:pointer;‘>上一页</a>") ;

if(jsCommonCp == 1){

liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式

}else{

aObj.on("click",function(){

if(jsCommonCp > 1){ //如果还存在有上一页

jsCommonCp -- ;

loadData() ;

}

}) ;

}

liObj.append(aObj) ;

$("#pagecontrol").append(liObj) ;

}

function nextPage(){ //在页面定义下一页按钮

var liObj = $("<li></li>") ; //定义一个li元素节点对象

var aObj = $("<a style=‘cursor:pointer;‘>下一页</a>") ;

if(jsCommonCp == jsCommonPageSize){

liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式

}else{

aObj.on("click",function(){

if(jsCommonCp < jsCommonPageSize){ //如果还存在有下一页

jsCommonCp ++;

loadData() ;

}

}) ;

}

liObj.append(aObj) ;

$("#pagecontrol").append(liObj) ;

}

function calcPageSize(allRecorders){ //计算总页数

//alert("calcPageSize function") ;

if(allRecorders == 0){

jsCommonPageSize = 1 ;

}else{

//js与java不一样此时不会自动转换成整型数据，需要手动设置

jsCommonPageSize = parseInt((allRecorders+jsCommonLs-1)/jsCommonLs) ;

}

}

loadData() ;

}) ;

// 读取JSP页面所返回的数 据

function loadData(){ //数据读取的函数定义

$.post("pages/news/NewsServlet/list",{"cp":jsCommonCp,

"ls":jsCommonLs},function(obj){

createSplitBar(obj.allRecorders) ;

},"json") ;

}

<!-- bordered:表格带有边框线条、hover：鼠标移动时表格行的颜色改变、striped表格行的颜色隔行变换 -->

<table class="table table-bordered tabel-hover table-striped" id="newsTable">

<tr>

<td class="text-center"><input type="checkbox" id="selectedAll" name="selectedAll"></td>

<td class="text-center"><strong>标题</strong></td>

<td class="text-center"><strong>发布日期</strong></td>

<td class="text-center"><strong>内容</strong></td>

<td class="text-center"><strong>操作</strong></td>

</tr>

</table>

<button class="btn btn-info" id="delBtn"><span class="glyphicon glyphicon-trash"></span> 删除</button>

</div>

<div id="dividedPage" class="text-right">

<ul class="pagination pagination-sm" id="pagecontrol">

</ul>

</div>

loadData() ;

}) ;

// 读取JSP页面所返回的数 据

function loadData(){ //数据读取的函数定义

$.post("pages/news/NewsServlet/list",{"cp":jsCommonCp,

"ls":jsCommonLs},function(obj){

$("#newsTable tr:gt(0)").remove() ;

createSplitBar(obj.allCount) ;

for(var i= 0 ;i<obj.selectedNews.length ;i++){

addRow(obj.selectedNews[i].nid,obj.selectedNews[i].title,obj.selectedNews[i].content,obj.selectedNews[i].pubdate);

}

},"json") ;

}

//增加表格行

function addRow(nid,title,content,pubdate){

var str = "<tr><td class=‘text-center‘><input type=‘checkbox‘"+

"id=‘nid‘ name=‘nid‘ value=‘"+nid+"‘></td>"+

"<td class=‘text-center‘ id=‘title-‘"+nid+">"+title+"</td>"+

"<td class=‘text-center‘ id=‘pubdate-‘"+nid+">"+pubdate+"</td>"+

"<td class=‘text-left‘ id=‘content-‘"+nid+">"+content+"</td>"+

"<td id=‘btn-‘"+nid+"><btn id=‘updateBtn-"+nid+"‘ data-toggle=‘modal‘ data-target=‘#newsInfo‘ "+

"class=‘btn btn-info‘><span class=‘glyphicon glyphicon-pencil‘>"+

"</span> 修改</btn></td></tr>"

$("#newsTable").append($(str)) ;

$("#updateBtn-"+nid).on("click",function(){

$("#snid").text(nid) ;

$("#title").val(title) ;

$("#content").val(content) ;

}) ;

}

var jsCommonLs = 5 ; //每页显示数据量

var jsCommonPageSize ; //总页数

function createSplitBar(allRecorders){ //专门用于创建分页操作的

clearBar();

calcPageSize(allRecorders) ;

if(jsCommonPageSize > 1){

previousPage() ;

addBar(1)  ;

}

var seed = 3 ; //设置一个显示省略号的临界点--种子数，如果大于它则出现，否则不出现

if(jsCommonCp > seed*2){

addDetailPage() ; //增加省略号按钮

var startPage = jsCommonCp - seed ;

for(var x=startPage ; x<jsCommonCp + seed ; x++){

if(x < jsCommonPageSize){

addBar(x) ;

}

}

if(jsCommonCp+2*seed < jsCommonPageSize){

addDetailPage() ;

}

}else{

for(var x = 2 ; x < jsCommonCp+seed ; x++){

if(x < jsCommonPageSize)

addBar(x) ;

}

if(jsCommonCp+seed < jsCommonPageSize){

addDetailPage() ;

}

}

addBar(jsCommonPageSize) ;

if(jsCommonPageSize > 1){

nextPage() ;

}

}

function clearBar(){ //定义数据的清空操作

$("#pagecontrol li").remove() ;

}

function addBar(index){ //用来生成分页功能的代码,即增加页面页码标签

var liObj = $("<li></li>") ; //定义一个li元素节点对象

var aObj = $("<a style=‘cursor:pointer;‘>"+index+"</a>") ;

if(jsCommonCp == index){

liObj.addClass("active") ; //如果此页码正好为当前页则设置一个样式

}else{

aObj.on("click",function(){

jsCommonCp = index ;

loadData() ;

}) ;

}

liObj.append(aObj) ;

$("#pagecontrol").append(liObj) ;

}

function addDetailPage(){ //添加省略号按钮

var liObj = $("<li><span>...</span></li>") ;

$("#pagecontrol").append(liObj) ;

}

function previousPage(){ //在页面定义上一页按钮

var liObj = $("<li></li>") ; //定义一个li元素节点对象

var aObj = $("<a style=‘cursor:pointer;‘>上一页</a>") ;

if(jsCommonCp == 1){

liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式

}else{

aObj.on("click",function(){

if(jsCommonCp > 1){ //如果还存在有上一页

jsCommonCp -- ;

loadData() ;

}

}) ;

}

liObj.append(aObj) ;

$("#pagecontrol").append(liObj) ;

}

function nextPage(){ //在页面定义下一页按钮

var liObj = $("<li></li>") ; //定义一个li元素节点对象

var aObj = $("<a style=‘cursor:pointer;‘>下一页</a>") ;

if(jsCommonCp == jsCommonPageSize){

liObj.addClass("disabled") ; //如果此页码正好为当前页则设置一个样式

}else{

aObj.on("click",function(){

if(jsCommonCp < jsCommonPageSize){ //如果还存在有下一页

jsCommonCp ++;

loadData() ;

}

}) ;

}

liObj.append(aObj) ;

$("#pagecontrol").append(liObj) ;

}

function calcPageSize(allRecorders){ //计算总页数

// alert("calcPageSize function:allRecorders="+allRecorders) ;

if(allRecorders == 0){

jsCommonPageSize = 1 ;

}else{

//js与java不一样此时不会自动转换成整型数据，需要手动设置

jsCommonPageSize = parseInt((allRecorders+jsCommonLs-1)/jsCommonLs) ;

}

}

<div class="modal" id="newsInfo">

<div class="modal-dialog" style="width: 600px">

<div class="modal-content">

<div class="modal-header">

<button class="close" data-dismiss="modal">&times;</button>

<h4 class="modal-title">新闻数据编辑</h4>

</div>

<div class="modal-body">

<form method="post" id="myForm" class="form-horizontal">

<fieldset>

<legend><label>新闻编辑</label></legend>

<div class="form-group" id="snidDiv" >

<label class="col-md-3 control-label" for="title">编号:</label>

<div class="col-md-5">

<span id="snid"></span>

</div>

<div class="col-md-4" id="snidSpan"></div>

</div>

<div class="form-group" id="titleDiv" >

<!-- 用label元素便于鼠标点击实现联动效果同时要设置for="title"才有效果 -->

<label class="col-md-3 control-label" for="title">标题:</label>

<div class="col-md-5">

<input id="title" name="title" type="text" value="test_title" placeholder="请输入标题" class="form-control">

</div>

<div class="col-md-4" id="titleSpan"></div>

</div>

<div class="form-group" id="contentDiv" >

<!-- 用label元素便于鼠标点击实现联动效果同时要设置for="content"才有效果 -->

<label class="col-md-3 control-label" for="content">新闻内容:</label>

<div class="col-md-5">

<textarea id="content" name="content"  placeholder="请输入内容" class="form-control">test_content</textarea>

</div>

<div class="col-md-4" id="contentSpan"></div>

</div>

<!-- 定义两个按钮 -->

<div class="form-group">

<div class="col-md-5 col-md-offset-3" >

<button type="submit" class="btn btn-info" id="updateBtn">修改</button>

</div>

</div>

</fieldset>

</form>

</div>

<div class="modal-footer">

<button class="btn btn-success" data-dismiss="modal">关闭界面</button>

</div>

</div>

</div>

</div>

$("#snid").text(nid) ;

$("#title").val(title) ;

$("#content").val(content) ;

var nid = $("#snid").text();

var title = $("#title").val() ;

var content = $("#content").val() ;

$.post("pages/news/NewsServlet/update",{"nid":nid,"title":title,"content":content},

function(obj){

if(obj.trim() == "true"){

$("#alertDiv").attr("class","alert alert-success") ;

$("#alertText").text("修改成功！") ;

//后台数据修改成功后，那么前台列表页相应的数据肯定要同步更新

$("#title-"+nid).text(title) ;

$("#content-"+nid).text(content) ;

}else{ //表示修改失败

$("#alertDiv").attr("class","alert alert-danger") ;

$("#alertText").text("修改失败！") ;

}

},"text") ;

//更新完毕后需要自动关闭模态窗口

$("#newsInfo").modal("hide") ;

//同时更新的状态信息也逐渐消失

$("#alertDiv").fadeIn(1000,function(){

$("#alertDiv").fadeOut(3000) ;

});

}

<div class="alert alert-info" style="display: none;" id="alertDiv">

<button class="colse">&times;</button>

<span id="alertText"></span>

</div>

// 被全选的元素

function checkboxSelectedAll(eleA,eleB){ //实现复选框全选操作

eleA.on("click",function(){

eleB.each(function(){

this.checked = eleA.prop("checked") ; //把eleA元素的属性checked赋值给前面

}) ;

}) ;

}

// 删除按钮的选择器

// ajax异步处理的链接

// 所有被选上的复选框

function deleteBtn(ele,cele,url){

ele.on("click",function(){

var selectedItem = "" ; //保存所有要删除的数据

cele.each(function(){ //针对每一个满足选择要求的元素都调用一次定义的函数

if(this.checked){ //如果当前的元素有tmd被选中，那么就要执行下列语句

selectedItem += this.value+"|" ;

}

});

if(selectedItem == ""){

alert("对不起，你他妈还没有选择任何元素，请先选择？");

}else{

if(window.confirm("你丫真要删除所选择的数据吗？")){

// 如果要删除就通过ajax调用后台实现数据删除的操作

$.post(url,{"ids":selectedItem},function(obj){

if(obj.trim("true")){

$("#alertDiv").attr("class","alert alert-success") ;

$("#alertText").text("删除成功") ;

loadData() ; //重新刷新列表页

}else{

$("#alertDiv").attr("class","alert alert-danger") ;

$("#alertText").text("删除失败") ;

}

$("#alertDiv").fadeIn(1000,function(){

$("#alertDiv").fadeOut(3000) ;

})

},"text") ;

}

}

});

} 

$.post("pages/news/NewsServlet/list",{"cp":jsCommonCp,

"ls":jsCommonLs},function(obj){

$("#newsTable tr:gt(0)").remove() ;

createSplitBar(obj.allCount) ;

for(var i= 0 ;i<obj.selectedNews.length ;i++){

addRow(obj.selectedNews[i].nid,obj.selectedNews[i].title,obj.selectedNews[i].content,obj.selectedNews[i].pubdate);

}

checkboxSelectedAll($("#selectedAll"),$("input[id=‘nid‘]"));

deleteBtn($("#delBtn"),$("input[id=‘nid‘]"),"pages/news/NewsServlet/delete");

},"json") ;

}