BootStrap实现邮件列表的分页和模态框添加邮件的功能


Posted in Javascript onOctober 13, 2016

废话不多说具体代码如下所示:

package com.rc.controller; 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.util.ArrayList; 
import java.util.List; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import javax.servlet.http.HttpSession; 
import net.sf.json.JSONObject; 
import com.rc.dao.R_mailboxDAO; 
import com.rc.daoimpl.R_mailboxDAOimpl; 
import com.rc.dbutil.Sqltools; 
import com.rc.entity.Mailbox; 
import com.rc.entity.R_user; 
import com.rc.entity.TreeNodes; 
import com.rc.util.Page; 
import com.rc.util.PageUtil; 
public class MailBoxServlet extends HttpServlet { 
/** 
* The doGet method of the servlet. <br> 
* 
* This method is called when a form has its tag value method equals to get. 
* 
* @param request the request send by the client to the server 
* @param response the response send by the server to the client 
* @throws ServletException if an error occurred 
* @throws IOException if an error occurred 
*/ 
@Override 
public void doGet(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
response.setContentType("text/html;charset=utf-8"); 
String action =request.getParameter("action"); 
HttpSession hs = request.getSession(false); //读取登录人员session 
R_user cuser =(R_user)hs.getAttribute("user"); 
PrintWriter out = null; 
R_mailboxDAO mb = new R_mailboxDAOimpl(); 
boolean b = true; 
if("page".equals(action)){//查询所有 
int pageNumber = 0; 
String PageNumberstr = request.getParameter("pageNumber");//从页面获取的当前页 
int count =mb.getcount(); 
if(PageNumberstr == null||"".equals(PageNumberstr)){ 
pageNumber= 1; 
}else{ 
pageNumber = Integer.parseInt(PageNumberstr);//否则强转 
} 
List <Page> pages = new ArrayList<Page>(); 
Page page = PageUtil.createPage(5, count, pageNumber); 
pages.add(page); 
List<Mailbox> mailboxlist = mb.getcostList(page); 
JSONObject obj = new JSONObject();//定义一个json对象 
obj.put("mailbox", mailboxlist); 
obj.put("Page", pages); 
out = response.getWriter(); 
out.write(obj.toString()); 
}else if("delete".equals(action)){//删除操作 
String mid = request.getParameter("id"); 
JSONObject obj = new JSONObject(); 
b =mb.delete(Integer.parseInt(mid));//用boolean接收 
obj.put("biaozhi",b); 
out = response.getWriter(); 
out.write(obj.toString()); 
}else if("edit".equals(action)){//弹出编辑页面 
}else if("tedit".equals(action)){//提交编辑信息 
}else if("pldelete".equals(action)){//批量删除 
JSONObject obj = new JSONObject(); 
String deleteidlist = request.getParameter("deleteidlist"); 
String[] item = deleteidlist.split(","); 
for (int i = 0; i < item.length; i++) { 
b =mb.delete(Integer.parseInt(item[i])); 
} 
obj.put("biaozhi",b); 
out = response.getWriter(); 
out.write(obj.toString()); 
}else if("tree".equals(action)){ 
List<TreeNodes> treelist = mb.getnodes(); 
JSONObject obj = new JSONObject();//定义一个json对象 
obj.put("treelist", treelist); 
out = response.getWriter(); 
out.write(obj.toString()); 
}else if("save".equals(action)){ 
String id = request.getParameter("id"); 
String zhuti = request.getParameter("zhuti"); 
String content = request.getParameter("content"); 
Mailbox mail = new Mailbox(); 
mail.setS_id(Integer.parseInt(id));//收件人 
mail.setS_name(Sqltools.findusername(Integer.parseInt(id)));//收件人姓名 
mail.setP_name(cuser.getUsername());//发件人姓名 
mail.setP_id(cuser.getId()); 
mail.setContent(content); 
mail.setTitle(zhuti); 
b = mb.addmailbox(mail); 
JSONObject obj = new JSONObject(); 
obj.put("biaozhi", b); 
out = response.getWriter(); 
out.write(obj.toString()); 
} 
} 
/** 
* The doPost method of the servlet. <br> 
* 
* This method is called when a form has its tag value method equals to post. 
* 
* @param request the request send by the client to the server 
* @param response the response send by the server to the client 
* @throws ServletException if an error occurred 
* @throws IOException if an error occurred 
*/ 
@Override 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
this.doGet(request, response); 
} 
}

dao层

package com.rc.dao; 
import java.util.List; 
import com.rc.entity.Mailbox; 
import com.rc.entity.TreeNodes; 
import com.rc.util.Page; 
public interface R_mailboxDAO { 
public List<Mailbox> getcostList(Page page); //获取全部的邮件 
public int getcount();//获取数目 
public boolean delete(Integer id); //删除 
public boolean add(Mailbox mail);//写信 
public boolean update(Integer id);//修改 
public List<TreeNodes> getnodes();//树 
public boolean addmailbox(Mailbox mail);//添加邮件 
}

daoimpl

<pre name="code" class="html">ackage com.rc.daoimpl; 
import java.sql.Connection; 
import java.sql.PreparedStatement; 
import java.sql.ResultSet; 
import java.sql.SQLException; 
import java.sql.Statement; 
import java.util.ArrayList; 
import java.util.List; 
import com.rc.dao.R_mailboxDAO; 
import com.rc.dbutil.Sqltools; 
import com.rc.entity.Mailbox; 
import com.rc.entity.TreeNodes; 
import com.rc.util.Page; 
import com.rc.util.StringUtil; 
public class R_mailboxDAOimpl implements R_mailboxDAO { 
boolean b=true; 
Connection cnn = null; 
PreparedStatement ps = null; 
ResultSet rs= null; 
Statement st = null; 
String sql=""; 
@Override 
public List<Mailbox> getcostList(Page page) { 
List <Mailbox> mailboxlist = new ArrayList<Mailbox>();//定义一个数组 
int startsize = page.getCurrentPage()*page.getEverPage(); 
int endsize = (page.getCurrentPage()-1)*page.getEverPage()+1; 
sql = "select * from (select a1.*,rownum rn from (select * from mailbox order by m_id desc) a1 WHERE rownum<="+startsize+") where rn>="+endsize+""; 
try{ 
rs =Sqltools.excuteQuery(sql, null); 
while(rs.next()){ 
Mailbox mailbox = new Mailbox(); 
mailbox.setMid(rs.getInt("m_id")); 
mailbox.setP_name(rs.getString("p_name")); 
mailbox.setS_name(rs.getString("r_name")); 
mailbox.setStatus(rs.getString("r_status")); 
mailbox.setContent(rs.getString("r_content")); 
mailbox.setTitle(rs.getString("r_title")); 
mailbox.setR_time(StringUtil.TimetoString(rs.getDate("r_time"))); 
mailboxlist.add(mailbox); 
} 
}catch(Exception e){ 
Sqltools.close(rs, st, cnn); 
} 
return mailboxlist.size()==0 ? null:mailboxlist; 
} 
@Override 
public int getcount() { 
int count =0; 
sql = "select count(*) from mailbox"; 
try{ 
cnn = Sqltools.getConnection(); 
ps = cnn.prepareStatement(sql); 
rs = ps.executeQuery(); 
if(rs.next()){ 
count = rs.getInt(1); 
} 
}catch(Exception e){ 
e.printStackTrace(); 
}finally{ 
Sqltools.close(rs, ps, cnn); 
} 
return count; 
} 
@Override 
public boolean delete(Integer id) { 
sql="delete from mailbox where m_id=?"; 
try{ 
cnn=Sqltools.getConnection(); 
ps=cnn.prepareStatement(sql); 
ps.setInt(1, id); 
ps.executeUpdate(); 
}catch(Exception e){ 
b=false; 
e.printStackTrace(); 
}finally{ 
Sqltools.aclose(rs, ps, cnn); 
} 
return b; 
} 
@Override 
public boolean add(Mailbox mail) { 
return false; 
} 
@Override 
public boolean update(Integer id) { 
return false; 
} 
@Override 
public List<TreeNodes> getnodes() {//得到树节点 
String sql = "select * from tree_table order by nid "; 
cnn = Sqltools.getConnection(); 
ArrayList<TreeNodes> treelist = new ArrayList<TreeNodes>(); 
try { 
ps = cnn.prepareStatement(sql); 
rs =ps.executeQuery(); 
while (rs.next()){ 
TreeNodes node = new TreeNodes(); 
node.setNid(rs.getInt("nid")); 
node.setParentId(rs.getInt("parentid")); 
node.setNodeName(rs.getString("nodename")); 
treelist.add(node); 
} 
} catch (SQLException e) { 
e.printStackTrace(); 
}finally{ 
Sqltools.aclose(rs, ps, cnn); 
} 
return treelist; 
} 
@Override 
public boolean addmailbox(Mailbox mail) { 
sql = "insert into mailbox(m_id,p_name,r_name,p_id,r_id,r_content,r_title,r_send,r_status,r_time) values(mailbox_id_seq.nextval,?,?,?,?,?,?,?,?,sysdate)"; 
try{ 
cnn =Sqltools.getConnection(); 
ps = cnn.prepareStatement(sql); 
ps.setString(1,mail.getP_name()); 
ps.setString(2,mail.getS_name()); 
ps.setInt(3,mail.getP_id()); 
ps.setInt(4,mail.getS_id()); 
ps.setString(5,mail.getContent()); 
ps.setString(6,mail.getTitle()); 
ps.setString(7,"0");//是否发送 
ps.setString(8,"3");//是否读取 
ps.executeUpdate(); 
}catch(Exception e){ 
b = false; 
e.printStackTrace(); 
}finally{ 
Sqltools.aclose(rs, ps, cnn); 
} 
return b; 
} 
}

jsp页面

<pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 
<title>My JSP 'mailbox.jsp' starting page</title> 
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<head> 
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/admin.css"> 
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/sweetalert.css"> 
<link rel="stylesheet" type="text/css" href="/rccwgl/components/dtree/dtree.css"> 
</head> 
<body> 
<!-- tab导航列表 --> 
<ul id="myTab" class="nav nav-tabs"> 
<li class="active"><a href="#home" data-toggle="tab" class="btn btn-primary">邮件列表</a></li> 
<li><a href="#ios" data-toggle="tab" class="btn btn-success">未读邮件</a></li> 
<li><a href="#gz" data-toggle="tab" class="btn btn-warning">已读邮件</a></li> 
<li><a href="#cg" data-toggle="tab" class="btn btn-info">草稿列表</a></li> 
<li class="dropdown"> 
<a href="#" id="myTabDrop1" class="dropdown-toggle btn-danger" data-toggle="dropdown">功能开发中 
<b class="caret"></b> 
</a> 
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> 
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">开发一</a></li> 
<li><a href="#ejb" tabindex="-1" data-toggle="tab">开发二</a></li> 
</ul> 
</li> 
</ul> 
<!-- 邮件内容显示 --> 
<div id="myTabContent" class="tab-content"> 
<!-- 邮件列表 --> 
<div class="tab-pane fade in active" id="home"> 
<!-- <form method="post" action="R_costServlet?action=plpay_a" onsubmit="return pldelete();">--> 
<div class="mainContent" > 
<input id="pl" type="button" class="btn btn-info" style="margin-top:50px;" onclick="pl()" value="批量删除"> 
<button class="btn btn-primary btn-bg pull-right" style="margin-top:50px;" data-toggle="modal" data-target="#myModal" onclick="addmail()">写邮件</button> 
<div class="row"> 
<div class="content"> 
<table class="table table-hover table-bordered"> 
<thead> 
<tr> 
<td align="left"><input type="checkbox" name="qx" onclick="quanxuan()" >全选</td> 
<td>主题</td> 
<td>发件人</td> 
<td>邮件内容</td> 
<td>接收时间</td> 
<td>是否读取</td> 
<td>操作</td> 
</tr> 
</thead> 
<tbody id="list"></tbody> 
</table> 
<div id="pageinfo" style="height:200px;"></div> 
</div> 
</div> 
</div> 
<!--</form> --> 
</div> 
<!-- 未读邮件 --> 
<div class="tab-pane fade" id="ios"> 
<!-- <form method="post" action="R_costServlet?action=plpay_a" onsubmit="return pldelete();">--> 
<div class="mainContent" > 
<input type="submit" value="批量删除" class="btn btn-info" style="margin-top:50px;"> 
<input type="submit" value="写邮件" class="btn btn-primary btn-bg pull-right" style="margin-top:50px;"> 
<div class="row"> 
<div class="content"> 
<table class="table table-hover table-bordered"> 
<thead> 
<tr> 
<td align="left"><input type="checkbox" name="qx" onclick="quanxuan(this)">全选</td> 
<td>序号</td> 
<td>发件人</td> 
<td>邮件内容</td> 
<td>接收时间</td> 
<td>是否读取</td> 
<td>编辑</td> 
</tr> 
</thead> 
<tbody id="list1"></tbody> 
</table> 
<div id="pageinfo1" style="height:200px;"></div> 
</div> 
</div> 
</div> 
<!-- </form>--> 
</div> 
<!-- 已读邮件 --> 
<div class="tab-pane fade" id="gz"> 
<!-- <form method="post" action="R_costServlet?action=plpay_a" onsubmit="return pldelete();">--> 
<div class="mainContent" > 
<input type="submit" value="批量删除" class="btn btn-info" style="margin-top:50px;"> 
<input type="submit" value="写邮件" class="btn btn-primary btn-bg pull-right" style="margin-top:50px;"> 
<div class="row"> 
<div class="content"> 
<table class="table table-hover table-bordered"> 
<thead> 
<tr> 
<td align="left"><input type="checkbox" name="qx" onclick="quanxuan(this)">全选</td> 
<td>序号</td> 
<td>发件人</td> 
<td>邮件内容</td> 
<td>接收时间</td> 
<td>是否读取</td> 
<td>编辑</td> 
</tr> 
</thead> 
<tbody id="list2"></tbody> 
</table> 
<div id="pageinfo2" style="height:200px;"></div> 
</div> 
</div> 
</div> 
<!-- </form>--> 
</div> 
<div class="tab-pane fade" id="jmeter"> 
<div class="mainContent" > 
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。</p> 
</div> 
</div> 
<div class="tab-pane fade" id="ejb"> 
<p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。 
</p> 
</div> 
<!-- 草稿列表 --> 
<div class="tab-pane fade" id="cg"> 
<!-- <form method="post" action="R_costServlet?action=plpay_a" onsubmit="return pldelete();">--> 
<div class="mainContent" > 
<input type="submit" value="批量删除" class="btn btn-info" style="margin-top:50px;"> 
<input type="submit" value="写邮件" class="btn btn-primary btn-bg pull-right" style="margin-top:50px;"> 
<div class="row"> 
<div class="content"> 
<table class="table table-hover table-bordered"> 
<thead> 
<tr> 
<td align="left"><input type="checkbox" name="qx" onclick="quanxuan(this)">全选</td> 
<td>序号</td> 
<td>发件人</td> 
<td>邮件内容</td> 
<td>接收时间</td> 
<td>是否读取</td> 
<td>编辑</td> 
</tr> 
</thead> 
<tbody id="list3"></tbody> 
</table> 
<div id="pageinfo3" style="height:200px;"></div> 
</div> 
</div> 
</div> 
<!-- </form>--> 
</div> 
<!-- --> 
</div> 
<!-- 写邮件的弹出框 --> 
<div id="alls" style=""> 
<div class="container"> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" > 
<div class="modal-dialog" role="document" style="width:800px"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
<h4 class="modal-title" id="myModalLabel">写邮件</h4> 
</div> 
<div class="modal-body"> 
<div class="form-group"> 
<label for="txt_departmentname">主题</label> 
<input type="text" name="txt_departmentname" class="form-control" id="zhuti" placeholder="部门名称"> 
</div> 
<div class="form-group"> 
<div id="treediv" style="display:none;overflow:scroll; width: 150px;height:300px; padding: 5px;background: #fff;color: #fff;border: 1px solid #cccccc" > 
<input type="text" name="txt_parentdepartment" class="form-control" id="menu_parent_name"> 
</div> 
</div> 
<div class="form-group"> 
<label for="txt_departmentname">收件人</label> 
<input type="text" name="txt_departmentname" class="form-control" id="setvalue" placeholder="部门名称"> 
<input type="hidden" id="menu_parent" name="menu_parent"><!-- 父菜单id --> 
</div> 
<div class="form-group"> 
<label for="txt_statu">邮件内容</label> 
<textarea rows="8" class="form-control" id="editor_id" name="content"></textarea> 
</div> 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-success" id="send" data-dismiss="modal"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>发送</button> 
<button type="button" class="btn btn-default" id="btn_close" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button> 
<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button> 
</div> 
</div> 
</div> 
</div> 
</div> 
</div> 
<script src="/rccwgl/js/jquery-3.1.0.min.js"></script> 
<script src="/rccwgl/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/bootstrap-paginator.js"></script> 
<script type="text/javascript" src="js/sweetalert.min.js"></script> 
<script type="text/javascript" src="js/sweetalert-dev.js"></script> 
<script src="/rccwgl/mailbox/js/mailbox.js"></script> 
<script type="text/javascript" charset="utf-8" src="mailbox/kindeditor-4.1.10/kindeditor.js"></script> 
<script charset="utf-8" src="mailbox/kindeditor-4.1.10/lang/zh_CN.js"></script> 
<script type="text/javascript" charset="utf-8" src="/rccwgl/mailbox/js//kdreply.js"></script> 
<SCRIPT type="text/javascript" src="/rccwgl/components/dtree/dtree.js"></SCRIPT> 
</body> 
</html>

js

<pre name="code" class="html">$(function(){//初始化页面 
page1(); 
initTree(); 
shouwtree(); 
$('#treediv').mouseleave(function(){//在鼠标离开选择树的时候,选择书影藏 
//alert("进来了"); 
$("#treediv").hide(); 
}); 
}); 
function Delete(mid){ 
swal({ title: "你确定要进行该操作?", 
text: "You will not be able to recover this imaginary file!", 
type: "warning", 
showCancelButton: true, 
confirmButtonColor: "#DD6B55", 
confirmButtonText: "是的, 删除!", 
cancelButtonText: "不, 取消", 
closeOnConfirm: false, 
closeOnCancel: false }, 
function(isConfirm){ 
if (isConfirm) { 
var action = "delete"; 
$.ajax({ 
type : "post", 
url : "MailBoxServlet", 
datatype:'json', 
data:{action:action,id:mid,a:Math.random()}, 
success : function(data){ 
var d= eval('('+data+')'); 
if(d.biaozhi==true){ 
swal("删除!", "删除成功", "success"); 
//window.location.reload();这种方式无法显示成功提示 
$("#list").empty(); 
page1(); 
}else{ 
swal("Deleted!", "删除失败", "error"); 
} 
} 
}); 
} 
else { 
swal("", "你已经取消的该操作 ", "error"); 
} 
}); 
} 
function Edit(mid){ 
alert(mid); 
} 
function pl(){//批量删除 
var checkedList = new Array(); 
var ids = ""; 
if($("input[name='deleteCusersid']:checked").length>0){ 
$("input[name='deleteCusersid']").each(function(){ 
if($(this).prop("checked")){//如果要未选中的 ==false 就可以了 
//ids += $(this).val()+","; 
checkedList.push($(this).val()); 
} 
}); 
swal({ title: "你确定要删除这"+checkedList.length+"行?", 
//text: "You will not be able to recover this imaginary file!", 
type: "warning", 
showCancelButton: true, 
confirmButtonColor: "#DD6B55", 
confirmButtonText: "是的, 确定删除!", 
cancelButtonText: "不, 取消", 
closeOnConfirm: false, 
closeOnCancel: false }, 
function(isConfirm){ 
if (isConfirm) { 
var action = "pldelete"; 
$.ajax({ 
type : "post", 
url : "MailBoxServlet", 
datatype:'json', 
data:{action:action,a:Math.random(),deleteidlist:checkedList.toString()}, 
success : function(data){ 
var d= eval('('+data+')'); 
if(d.biaozhi==true){ 
swal("删除!", "批量删除成功", "success"); 
$("input[name='deleteCusersid']").prop("checked",false);//将其他有对号的清除 
$("input[name='qx']").prop("checked",false);//将全选的对号清除 
$("#list").empty(); 
page1(); 
//window.location.reload(); 
}else{ 
swal("Deleted!", "删除失败", "error"); 
} 
} 
}); 
} 
else { 
swal("", "你已经取消的该操作 ", "error"); 
$("input[name='qx']").prop("checked",false); 
$("input[name='deleteCusersid']").prop("checked",false); 
} 
}); 
}else{ 
swal("失败!", "你必须选择至少一行进行该操作!", "info"); 
} 
} 
function quanxuan(){//全选与全不选 
if($("input[name='qx']").prop("checked")){ 
var checkbox = $("input[name='deleteCusersid']"); 
checkbox.prop("checked",true); 
}else{ 
var checkbox = $("input[name='deleteCusersid']"); 
checkbox.prop("checked",false); 
} 
} 
function addmail(){//写邮件 
$("#btn_submit").click(function(){ 
var id = $("#menu_parent").val(); 
var zhuti = $("#zhuti").val();//获取主题 
var content = $("#editor_id").val();//获取内容 
if(zhuti==""||id==""){ 
if(zhuti==""){ 
swal("主题不能为空"); 
}else{ 
swal("收件人不能为空"); 
} 
return false; 
}else{ 
var action = "save"; 
$.ajax({ 
url: "MailBoxServlet", 
data : 'json', 
type : "post", 
data :{action:action,id :id,content :content,zhuti :zhuti,a : Math.random()}, 
success : function(data){ 
if(data !=null){ 
var d= eval('('+data+')'); 
if(d.biaozhi){ 
swal("邮件编写成功"); 
}else{ 
swal("邮件编写失败"); 
} 
} 
$("#zhuti").val(""); //关闭的时候将所有的值制空 
$("#setvalue").val(""); 
KindEditor.instances[0].html('');//专门的将textarea值置空0表示第一个KindEditor编辑器对象 
$("#list").empty();//置空 
page1();//异步刷新页面 
} 
}); 
} 
//swal("关闭"); 
}); 
$("#btn_close").click(function(){ 
$("#zhuti").val(""); //关闭的时候将所有的值制空 
$("#setvalue").val(""); 
KindEditor.instances[0].html('');//专门的将textarea值置空0表示第一个KindEditor编辑器对象 
swal("关闭"); 
}); 
$("#send").click(function(){ 
swal("发送成功"); 
}); 
} 
function initTree(){//初始化树 
var action = "tree"; 
mydtree = new dTree('mydtree','${pageContext.request.contextPath}/style/default/images/dtree/','no','no'); 
mydtree.add(0, 
-1, 
"根目录", 
"javascript:setvalue('0','根目录')", 
"根目录", 
"_self", 
true); 
$.ajax({ 
url: "MailBoxServlet", 
data : 'json', 
type : "post", 
data :{action:action,a : Math.random()}, 
success : function(data){ 
if(data !=null){ 
$.each(eval("(" +data+ ")").treelist,function(index,item){ 
var id =item.nid; 
var pid = item.parentId; 
var nodesname = item.nodeName; 
mydtree.add(id,pid,nodesname,"javascript:setvalue('"+id+"','"+nodesname+"')",nodesname,"_self",false); 
}); 
//document.write(mydtree); 
//将树添加到指定div(jQuery) 
$("#treediv").html(mydtree.toString()); 
} 
} 
}); 
} 
function shouwtree(){ 
$("#setvalue").click(function(){ 
$("#treediv").show(); 
}); 
} 
function setvalue(id,name){ 
$("#setvalue").val(name); 
$("#menu_parent").val(id); 
$("#treediv").hide(); 
} 
function page1(){ 
var pageNumber = 1;//默认初始页为第一页 
var action = "page";//定义一个要进入的条件 
$.ajax({//ajax请求 
url: "MailBoxServlet", 
data :'json', 
type: "Post", 
data:{action:action,pageNumber:pageNumber,a:Math.random()},//参数 
success : function(data){//请求成功的方法 
if(data !=null){ 
$.each(eval("(" + data + ")").mailbox, function (index, item) { //遍历返回的json 
var html = "<tr><td><input type='checkbox' name='deleteCusersid' value='"+item.mid+"'/></td><td>" + item.title + "</td><td>" + item.p_name + "</td><td>" + item.content + "</td><td>" +item.r_time+ "</td><td>" +item.status+ "</td><td>"; 
m1 ="编辑"; 
m2="删除"; 
html2="<div class='btn-group'><button onclick='Edit("+item.mid+")' class='btn btn-info btn-sm' ><span class='glyphicon glyphicon-edit icon-white'></span> " +m1+"</button>" 
+"<button onclick='Delete("+item.mid+")' class='btn btn-danger btn-sm' ><span class='glyphicon glyphicon-trash icon-white'></span> " +m2+"</button>" 
+"</div></td></tr>"; 
html+= html2; 
$("#list").append(html); 
}); 
var pageCount = eval("(" + data + ")").Page[0].totalPage; //取到pageCount的值(把返回数据转成object类型) 
var currentPage = eval("(" + data + ")").Page[0].currentPage; //得到urrentPage 
var options = { 
bootstrapMajorVersion: 2, //版本 
currentPage: currentPage, //当前页数 
totalPages: pageCount, //总页数 
//numberOfPages:10, 
itemTexts: function (type, page, current) { 
switch (type) { 
case "first": 
return "首页"; 
case "prev": 
return "上一页"; 
case "next": 
return "下一页"; 
case "last": 
return "末页"; 
case "page": 
return page; 
} 
}, 
onPageClicked: function (event, originalEvent, type, page) { 
$("#list").empty(); 
$.ajax({ 
url: "MailBoxServlet?pageNumber=" + page, 
type: "Post", 
data:{action:"page",a:Math.random()}, 
success: function (data1) { 
if (data1 != null) { 
$.each(eval("(" + data1 + ")").mailbox, function (index, item) { //遍历返回的json 
var html = "<tr><td><input type='checkbox' name='deleteCusersid' value='"+item.mid+"'/></td><td>" + item.mid + "</td><td>" + item.p_name + "</td><td>" + item.content + "</td><td>" +item.r_time+ "</td><td>" +item.status+ "</td><td>"; 
m1 ="编辑"; 
m2="删除"; 
html2="<div class='btn-group'><button onclick='Edit("+item.mid+")' class='btn btn-info btn-sm' ><span class='glyphicon glyphicon-edit icon-white'></span> " +m1+"</button>" 
+"<button onclick='Delete("+item.mid+")' class='btn btn-danger btn-sm' ><span class='glyphicon glyphicon-trash icon-white'></span> " +m2+"</button>" 
+"</div></td></tr>"; 
html+= html2; 
$("#list").append(html); 
}); 
} 
} 
}); 
} 
}; 
$('#pageinfo').bootstrapPaginator(options); 
} 
} 
}); 
}

以上所述是小编给大家介绍的BootStrap实现邮件列表的分页和模态框添加邮件的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
React事件处理的机制及原理
Dec 03 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
jQuery中delegate()方法的用法详解
Oct 13 #Javascript
炫酷的js手风琴效果
Oct 13 #Javascript
轻松搞定js表单验证
Oct 13 #Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 #Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 #Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 #Javascript
JS取模、取商及取整运算方法示例
Oct 13 #Javascript
You might like
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php语言的7种基本的排序方法
2020/12/28 PHP
CI框架附属类用法分析
2018/12/26 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
Node.js的特点详解
2017/02/03 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
python线性插值解析
2020/07/05 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
小学数学教学反思
2014/02/02 职场文书
说明书格式及范文
2014/05/07 职场文书
泰山导游词
2015/02/02 职场文书
自荐信格式范文
2015/03/04 职场文书
防暑降温通知书
2015/04/27 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
结婚主持人致辞
2015/07/28 职场文书
spring boot实现文件上传
2022/08/14 Java/Android