目录
参考文章
介绍
功能介绍：
思路介绍：
html代码
代码介绍
回调ajax
代码介绍
分页js
代码介绍
css
代码介绍
调用js
代码介绍
效果
操作弹出框
页面样式介绍
一个后台分页查询示例：
介绍
1.使用页面
2.加载分页js
3.加载css样式
4.加载ajax回调服务
5.调用封装分页内回调服务
6.左侧栏按钮事件
7.具体下边有单独介绍
功能介绍：
1.上 div 左div 右div
2.左右关联点击出对应div js中控制
3.右边宽度，根据大于1366屏幕进行计算宽度
4.表格分页，操作弹出框调用
思路介绍：
1.操作弹出框调用后进行及时更新当前页面
2.所以再页面加载的时候进行记录当前分页值
3.编辑后更新分页内容即可
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>xx管理服务</title>
<link rel="stylesheet" type="text/css" href="../../css/admin/indexAdminApplyCaseNum.css" />
<script type="text/javascript" src="../../lib/jquery.js"></script>
<script type="text/javascript" src="../../js/serverData.js" ></script>
<script type="text/javascript" src="../../js/pageUitl.js"></script>
</head>
<body>
<div class="titleInfo">
<label style="margin-left:20px;float:left;">平台xx后台管理</label>
<span onclick="window.open('../../../indexadmin.html')">回到首页</span>
<span>退出</span>
</div>
<div class="leftInfo">
<div style="background: #2C8CF0;">概览</div>
<div >xx管理</div>
</div>
<div class="rightInfo">
<div class="infobody" id="body0" style="display:block;">
<h3>概览</h3>
</div>
<!-- 在线用户管理模块 -->
<div class="infobody" id="body1">
<!-- 标题 -->
<div class="title"><label>xx管理</label></div>
<!-- 搜索 -->
<div class="search">
xx类型：<input type="text" id="casenum_type">
年号：<input type="text" id="year">
xx号：<input type="text" id="letter_no">
任务名称：<input type="text" id="task_name">
申请人姓名：<input type="text" id="user_name">
手机号： <input type="text" id="phone">
<input type="button" id="submit" value="搜索" />
</div>
<!-- 内容 -->
<div class="infoIn"></div>
<!-- 分页 -->
<div class="pageUitl"></div>
</div>
<!-- 扩展模块2等等-->
</div>
<!-- xx管理编辑弹出框 -->
<div class="applyCaseEditPopup">
<pxx管理编辑<span style="float: right;margin-right:20px;" onclick="$('.applyCaseEditPopup').hide();">X</span></p>
<p>编号：<label id="idEdit"></label></p>
<!-- <p>年号:<label id="yearEdit"></label></p>
<p>xx号:<label id="letter_noEdit"></label></p> -->
<p>使用状态：<select id="availableEdit"><option value="1">使用</option><option value="0">停用</option></select></p>
<p>状态备注：<textarea id="available_remarksEdit"></textarea></p>
<p><span onclick="upApplyLetterNoAvailableV2();">提交</span></p>
</div>
</body>
<script type="text/javascript" src="../../js/admin/indexAdminApplyCaseNum.js"></script>
</html> 代码介绍
1.加载jquery 和对应js
2.回调ajax 和分页js 进行加载
3.最后加载调用服务的js
回调ajax
/**
* 获取数据服务
* 示例
var params = {
url:"/spccService/sendCheckCode",
data:{phoneNum:document.getElementById("phoneNum").value},
callback: function(){alert(data=='success'?'发送成功':'发送失败');}
};
getService(params);
*
* @param {*} params 参数
*/
var getService = function(params) {
params.data.serviceToken = getCookie("serviceToken");
params.data.time = getCookie("time");
params.data.userid = getCookie("userid");
params.data.serverToken = getCookie("serverToken");
$.ajax({
type: "POST",
url: ServerUrl + params.url,
data: params.data,
async: true,
//crossDomain: true,
// xhrFields: {withCredentials: true},
success: function(data) {
if (data == "illegal token") {
alert("非法请求");
delCookie("time");
delCookie("userid");
delCookie("type");
window.location = nowHtmlAddressorigin + "/index.html?login=false"
return;
}
params.callback(data);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
//错误信息
console.log(textStatus);
alert("异常");
delCookie("time");
delCookie("userid");
delCookie("type");
window.location = nowHtmlAddressorigin + "/index.html?login=false"
return;
}
});
} 代码介绍
1.回调js进行服务安全校验，自行修改
2.通过params.callback 进行执行回调方法
分页js
//公共数据
var superdata = {
//分页使用
pageUtil:' <label id="pagingUitl">'
+' <span>首页</span>'
+' <span>上一页</span>'
+' 第：<input type="text" id="numPage" style="width:30px;" value="1"/>'
+' 共:<label id="maxpage">1</label>页'
+' <span>跳至页</span>'
+' <span>下一页</span>'
+' <span>尾页</span>'
+' 页显示：<label id="nowLineNum">1</label>条'
+' 共:<label id="totalNum">1</label>条'
+'</label>',
};
/**
* 添加分页公共分页
*
* test 调用示例
*
* var pageParams ={
pageNum:pageNum //当前页数
,pageCount:pageCount //一页展示条数
,totalNum:totalNum //总条数
,id:"#infobody1 .pageUitl" //展示位置
,callbackFun:"getUserTask(params.pageNum,params.pageCount);"//回调方法
}
addPagingUitl(pageParams);
*
*
* @param {
* pageNum :页数
* ,pageCount: 一页条数
* ,totalNum :总条数
* ,id 展示位置
* callbackFun:回调方法
* } params
*
*
*/
var addPagingUitl = function(params){
//------------------------------------------1.获取参数---------------------
//当前页(必传)
var pageNum = params.pageNum==null?0:params.pageNum;
//每页展示条数(必传)
var nowPageConet = params.pageCount==null?10:params.pageCount;
//总条数(必传)
var totalNum = params.totalNum==null?16:params.totalNum;
//------------------------------------------2.渲染分页页面---------------------
//渲染页面 页数 一页条数 总条数 总页数
$(params.id).empty().append(superdata.pageUtil);
//------------------------------------------3.添加分页值---------------------
//添加分页参数值
$(params.id+' #pagingUitl #numPage').attr("value",pageNum);//当前页
$(params.id+' #pagingUitl #maxpage').text(Math.ceil(totalNum/nowPageConet));//总页数
$(params.id+' #pagingUitl #nowLineNum').text(nowPageConet);//一页展示条数
$(params.id+' #pagingUitl #totalNum').text(totalNum);//总条数
//------------------------------------------4.设置样式---------------------
//获取当前位置宽度
var nowbodyWidth = $(params.id).width();
//设置分页样式 居中
$(params.id+" #pagingUitl").css("margin-left",((nowbodyWidth-590)/2)+"px")
//------------------------------------------5.设置样式---------------------
//按钮事件
$(params.id+" #pagingUitl span").click(function(){
var nowText = $(this).text();
var pageNum = parseInt($(params.id+" #pagingUitl #numPage").val());//当前页
var maxpage = parseInt($(params.id+" #pagingUitl #maxpage").text());//总页数
if(nowText == "首页"){
params.pageNum = 1;
}else if(nowText == "上一页"){
if(pageNum == 1){
alert("已经是第一页了！");
return;
}
params.pageNum = pageNum-1;
}else if(nowText == "下一页"){
if(pageNum == maxpage){
alert("已经是最后一页了！");
return;
}
params.pageNum = pageNum+1;
}else if(nowText == "尾页"){
params.pageNum = maxpage;
}else if(nowText=="跳至页"){
if(pageNum>maxpage || pageNum==0){
alert("请输入正确页数！");
return;
}
params.pageNum = pageNum;
}
eval（params.callbackFun);//执行后回调方法
});
}
代码介绍
1.分页代码，中使用了上层传来的回调
2.这里直接拷贝进去即可
3.css这种span进行了样式设置，更新css更新样式
css
/* -----------------基础层一级样式----------------- */
html {background: #EBECEE;}
body {margin: 0; padding: 0;min-width: 1360px;}
/* -----------------基础层一级样式----------------- */
/* -----------------页面上边栏样式----------------- */
.titleInfo {
float: left;
height: 50px;
line-height: 50px;
background: #000;
width: 100%;
color: #fff;
text-align: right;
}
.titleInfo label {
margin-right: 20px;
}
.titleInfo span{
border:1px solid #fff;margin-right: 20px;
}
/* -----------------页面上边栏样式----------------- */
/* ---------------------页面左边栏样式------------------------- */
.leftInfo {
float: left;
width: 200px;
min-height: 600px;
background: #191A23;
text-align: center;
color: #CACCCF;
}
.leftInfo div {
height: 38px;
line-height: 38px;
cursor: pointer;
}
.leftInfo div:hover {
background: #2C8CF0;
}
/* ---------------------页面左边栏样式------------------------- */
/* --------------------------------选项卡结构------------------------ */
.rightInfo {
float: left;
width: 1100px;
min-height: 600px;
padding: 20px;
background: #fff;
}
.rightInfo .infobody{
display:none;
}
#body0{text-align:center;}
/* --------------------------------选项卡内部内容结构，公共模块样式------------------------ */
.infobody{float:left;}
/* 标题 */
.infobody .title {height: 38px;line-height: 38px;border-bottom: 2px solid #ebecee;}
/* 搜索 */
.infobody .search {line-height: 38px;}
/* 搜索内input */
.infobody .search input {width: 100px;}
/* 存放body 的 div 块 */
.infobody .infoIn { float: left;width: 100%;}
/* --------------------------------选项卡内部内容结构，公共模块样式------------------------ */
/* --------------------------------span 按钮基础样式和鼠标悬浮样式 ------------------------ */
span { padding: 0px 8px; border: 1px solid #191A23;border-radius: 2px;cursor: pointer;}
span:hover { background: #a8cef7; }
/* --------------------------------span 按钮基础样式和鼠标悬浮样式 ------------------------ */
/* -----------------------------分页样式----------------------------- */
.infobody .pageUitl { float: left;width: 100%;height: 50px;line-height: 50px;background: #fff;}
/* -----------------------------分页样式----------------------------- */
/* -----------------------------表格样式----------------------------- */
table {
width: 100%;
text-align: center;
line-height: 39px;
font-size: 14px;
/* 去除边框线 */
border-collapse: collapse;
color: #333333;
}
/* 表头样式 */
table thead tr { background: #464856; color: #fff; }
/* 奇数行 */
table tbody tr:nth-child(odd) { background: #ffffff; }
/* 偶数行 */
table tbody tr:nth-child(even) { background: #EBF5FF; }
/* 悬浮事件 */
table tbody tr:hover { background: #cfefff;}
/* -----------------------------表格样式----------------------------- */
/* 弹出框样式 */
.applyCaseEditPopup{
display:none;
width: 500px;
border: 1px solid #333;
border-radius: 2px;
text-align: center;
background: #ffffff;
position: absolute;
top: 100px;
left: 50%;
margin-left: -250px;
}
.applyCaseEditPopup select{
width: 166px;
} 代码介绍
1.css包括一层页面 html body 内容样式
2.抬头样式
3.左侧栏样式
4.右侧栏样式
5.js中对右侧栏进行了屏幕大小的扩大缩小
6.内容样式
7.内容界面样式，标题，搜索，内容，分页
8.表格样式
调用js
//公共js包中方这个
var globalNowPage={pageNum:1,pageCount:10}
//单独页面中设置这个
globalNowPage.pageNum=1;
globalNowPage.pageCount=9;
if(document.documentElement.clientWidth>1366){
$(".rightInfo").css("width",(document.documentElement.clientWidth-200-50)+"px");
}
//搜索方法
$("#body1 .search #submit").click(function(){//用户管理搜索
getUserTask1(globalNowPage.pageNum,globalNowPage.pageCount);
});
//左侧栏点击出发事件
$(".leftInfo div").click(function(){//用户管理搜索
if($(this).text()=="xx管理"){
$(".rightInfo .infobody").hide(); //关闭其他栏
$(".rightInfo #body1").show();//打开当前栏目
//执行任务
getUserTask1(globalNowPage.pageNum,globalNowPage.pageCount);
}else if($(this).text()=="概览"){
$(".rightInfo .infobody").hide();//关闭其他栏
$(".rightInfo #body0").show();//打开当前栏目
}
$(".leftInfo div").css("background","");
$(this).css("background","#2C8CF0");
});
var nowOnlyQueryUserid = "";//当前操作对应用户
var getUserTask1 = function(pageNum,pageCount) {
globalNowPage.pageNum=pageNum;
globalNowPage.pageCount=pageCount;
var params = {
url: "/applxxService/queryAxxterNo",
data: {
pageNum: pageNum
,pageCount: pageCount
,casenum_type :$("#casenum_type").val()
,year :$("#year").val()
,letter_no :$("#letter_no").val()
,task_name :$("#task_name").val()
,user_name :$("#user_name").val()
,phone :$("#phone").val()
},
callback: function(data) { getUserTaskCallback1(data,pageNum,pageCount); }
};
callbackAjaxBService(params);
}
var getUserTaskCallback1 = function(data,pageNum,pageCount) { //展示表格
var params = {
element: "#body1 .infoIn",
data: data.data,
totalNum: data.totalCount,
thead: ["编号", "xx类型", "年号" , "xx号" , "任务名称" , "申请人", "手机号","申请ip","备注","申请时间","使用状态","操作"],
tbody: ["id" , "casenum_type", "year","letter_no", "task_name", "user_name", "phone","user_ip","remarks","create_time","available"],
callback: function() { console.log(data) }
}
// public.tableUitl(params);
//需要特别操作的写单独内容
var element = params.element,
data = params.data,
thead = params.thead,
totalNum=params.totalNum,
tbody = params.tbody;
// callback=params.callback;
//表格内容info
var htmlTheadVal = "";
var htmlTbodyVal = "";
for (let i = 0; i < thead.length; i++) { //写入表格头
htmlTheadVal += '<th>' + thead[i] + '</th>';
}
for (let i = 0; i < data.length; i++) { //写入表格体
htmlTbodyVal += '<tr>';
for (let j = 0; j < tbody.length; j++) {
var nowHtml = "";
if (tbody[j].indexOf('time') != -1) {
nowHtml = formatDateTime(data[i][tbody[j]]-(8*60*60*1000));
}else if(tbody[j]=="phone"){
nowHtml = data[i][tbody[j]];
}else if(tbody[j]=="year"){
let date = new Date(parseInt(data[i][tbody[j]]));
nowHtml = date.getFullYear();
}else{
nowHtml = data[i][tbody[j]] == null ? " " : data[i][tbody[j]];
}
htmlTbodyVal += '<td><div>' + nowHtml + '</div></td>';
if (j == tbody.length - 1) {
nowHtml = '<span idkey="' + data[i]["id"] + '" idkeyavailable="' + data[i]["available"] + '"idkeyavailable_remarks="' + data[i]["available_remarks"] + '">编辑</span>';
htmlTbodyVal += '<td><div>' + nowHtml + '</div></td>';
}
}
htmlTbodyVal += '</tr>';
}
var htmlThead = "<thead><tr>" + htmlTheadVal + "</tr></thead>";
var htmlTbody = "<tbody>" + htmlTbodyVal + "</tbody>";
var htmlTable = "<table>" + htmlThead + htmlTbody + "</table>";
$(element).empty().append(htmlTable);
//点击设置编辑弹出框操作
$(element + ' span').click(function() {
var idkey = $(this).attr("idkey");
var idkeyavailable = $(this).attr("idkeyavailable");
var idkeyavailable_remarks = $(this).attr("idkeyavailable_remarks");
$(".applyCaseEditPopup").show();//打开弹出框填入内容
$(".applyCaseEditPopup #idEdit").text(idkey);
$(".applyCaseEditPopup #availableEdit").val(idkeyavailable);
$(".applyCaseEditPopup #available_remarksEdit").val(idkeyavailable_remarks);
});
//加载分页
var pageParams ={
pageNum:pageNum
,pageCount:pageCount
,totalNum:totalNum
,id:"#body1 .pageUitl"//新模块修改位置
,callbackFun:"getUserTask1(params.pageNum,params.pageCount);"//新模块修改位置
}
addPagingUitl(pageParams);
}
//初始化加载
var init = function(){
getUserTask1(globalNowPage.pageNum,globalNowPage.pageCount);
}
init();
//编辑功能提交数据
function upApplyLetterNoAvailableV2(){
var params = {
url: "/apprvice/upApterNoAvbleV2",
data: {
queryid :$("#idEdit").text()
,available :$("#availableEdit").val()
,available_remarks :$("#available_remarksEdit").val()
},
callback: function(data) {
alert(data)
getUserTask1(globalNowPage.pageNum,globalNowPage.pageCount);
}
};
callbackAjaxBService(params);
} 代码介绍
1.页面左侧栏基础按钮
2.初始化加载服务
3.调用回调服务
4.分页操作继续执行传来的方法服务
5.方法服务中包含了再次回调分页查询数据服务
6.通过回调，执行元传来的回调实现，由此循环往复，生生不息
7. 如此ok ，页面左侧栏的事件可以继续升级，如加内容，减内容，出效果等
效果
操作弹出框
页面样式介绍
1.最上边采用最低色 #000
2.左侧采用稍微底黑点的
3.内容黑蓝近
4.由此低白
5.总体看的还阔以，有升级样式的提供些样式颜色色彩值
6.色彩值包括
7.上、上内、左、左内、左内悬浮后、右、标题、搜索、表格、分页
一个后台分页查询示例：
/**
* 查询支付订单
*
* @param userid
* @param queryid
* @param relation_order_id
* @param subject
* @param relation_table
* @param pageCount
* @param pageNum
*
* @return JSONObject
*/
public JSONObject queryOrderTask(String userid, String queryid,
String relation_order_id, String subject, String relation_table, int pageNum, int pageCount) {
JSONObject restJo = new JSONObject();
try {
String datasSql = "select * from ";
String countSql = "select count(id) totalCount from ";
String whereSql ="pay_order_0 where userid='"+userid+"' ";
if(!relation_order_id.equals("")){
whereSql += " relation_order_id='"+relation_order_id+"' ";
}
// 查询没有分页的总条数
int totalList = aod.queryTotalApiInfo(countSql+whereSql);
log.info(userid+ "query pay_order_0 count success");
System.out.println(totalList);
// 查询当前查询分页数据
whereSql += " ORDER BY create_time desc ";
whereSql += " limit " + (pageNum - 1) * pageCount + "," + pageCount+ " ;";
List<HashMap<String, Object>> list = aod.queryApiInfo(datasSql+whereSql);
log.info(userid+ "query pay_order_0 data success");
// 组装数据
restJo.put("state", "success");
restJo.put("totalCount", totalList);
restJo.put("data", list);
return restJo;
} catch (Exception e) {
log.info(userid+ "query pay_order_0 error:"+ e.toString());
// 组装数据
restJo.put("state", "error");
restJo.put("totalCount", "0");
restJo.put("data", "null");
return restJo;
}
} ok
持续更新