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 相关文章推荐
深入理解JavaScript作用域和作用域链
Oct 21 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
原生js实现自定义消息提示框
Nov 19 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
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
javascript字符串拼接的效率问题
2010/12/25 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
js闭包用法实例详解
2016/12/13 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
Python类定义和类继承详解
2015/05/08 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python tkinter三种布局实例详解
2020/01/06 Python
Tensorflow累加的实现案例
2020/02/05 Python
Python中if有多个条件处理方法
2020/02/26 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
销售会计工作职责
2013/12/02 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
监理中标通知书
2015/04/16 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
Vue h函数的使用详解
2022/02/18 Vue.js
MySQL读取JSON转换的方式
2022/03/18 MySQL