目录
接下来就是核心的调用 pageUitl 和 回调ajax的 地方了
获取服务并且使用下一次操作的回调方法出现表格，和再次启用回调出下一页分页操作的js
css 表格样式 加 出发事件，这是奇数行 偶数行 和悬浮事件，省去到js中设置
再献上一个批量修改页面表格中 tr td div 中 或 tr td 中的值，判断值超过几位数后变成 添加一个title字段，另外展示改成 几位数加...展示
介绍
之前介绍过一款博客，这次在这基础上进行升级更加细化，更加容易嵌入各类型系统，方便调用
再下边有js调用的思路介绍
还有css 和页面的思路介绍
持续更新
后台接口api参数
后台接口返回数据
先上公共包代码
public 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;
}
});
}
cookie操作
//设置cookie：
function setCookie(name, value) {
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString();
}
//读取cookie：
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)) {
return unescape(arr[2]);
} else {
return null;
}
}
//删除cookie：
//cookie没有提供删除cookie的方法，我们可以设置cookie的参数manAge=0让cookie过期，来达到删除cookie的效果。
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";path=/;expires=" + exp.toGMTString();
}
分页uitll 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.设置样式---------------------
//设置分页样式 居中
$(params.id+" #pagingUitl").css("margin-left",((nowbodyWidth-550)/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);//执行后回调方法
});
}
接下来就是核心的调用 pageUitl 和 回调ajax的 地方了
获取服务并且使用下一次操作的回调方法出现表格，和再次启用回调出下一页分页操作的js
var nowOnlyQueryUserid = "";//当前操作对应用户
var getUserTask1 = function(pageNum,pageCount) {
var params = {
url: "/deptService/qyglservice/adminQueryUserData",
data: {
pageNum: pageNum
,pageCount: pageCount
,userPhone :$("#userPhone").val()
,userName :$("#userName").val()
,queryid :$("#queryid1").val()
},
callback: function(data) { getUserTaskCallback1(data,pageNum,pageCount); }
};
getService(params);
}
var getUserTaskCallback1 = function(data,pageNum,pageCount) { //展示表格
var params = {
element: "#body2 .infoIn",
data: data.data,
totalNum: data.totalCount,
thead: ["编号", "名称" , "手机号" , "创建时间" , "标签", "备注","密录失败","验证败 ","操作"],
tbody: ["id" , "name", "phone", "create_time", "label", "remarks","passwornumber","phonlogin_number"],
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]]);
}else if(tbody[j]=="phone"){
nowHtml = data[i][tbody[j]]+"****";
}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"] + '">查看权限</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");
nowOnlyQueryUserid = idkey;
var params = { //查看版本具体数据
url: "/deptService/qyglservice/queryUserAllDept",
data: {
pageNum: 1,
pageCount: 200,
queryid: idkey
},
callback: function(data) {
//展示权限页面
clearAllBodyOpenOnly("#onlyUserAlldept");
getUserTaskDeptCallback1(data);
}
};
getService(params);
});
//加载分页
var pageParams ={
pageNum:pageNum
,pageCount:pageCount
,totalNum:totalNum
,id:"#body2 .pageUitl"
,callbackFun:"getUserTask1(params.pageNum,params.pageCount);"
}
addPagingUitl(pageParams);
}
代码介绍
1.最上边显示走了一个js的ajax回调，
2.传入值的时候要带上页面中查询的参数，直接放入ajax的参数中
3.带上分页参数，这个在后边的分页回调中会使用上
4.返回的数据通过调用回调展示到表格中，表格通过js 字符串拼接出来
5.在页面加载完毕后加载调用分页回调，只有最好加载，的才能调用之前页面js document中的内容
6.所以这里后调用的都要在 $(element).empty().append(htmlTable);之后写
7.这里还有表格中的点击事件，如果还有其他事件都可以在这里添加，回调中可以写任意东西
8.也可以在回调的位置直接写内容，不用回调方法
9.各种写法都方便扩展，可随意扩展
10.使用的时候，直接先吧前几个js拷贝，然后吧上边这个js直接拷贝使用即可
11.这里使用到了 公共变量 nowOnlyQueryUserid 这个是可以自定义的，不推荐使用可以使用回调代值
12. ok总的思路就是这些，有需要沟通的随时沟通
调用代码位置
//公共js包中方这个
var globalNowPage={pageNum:1,pageCount:10}
//单独页面中设置这个
globalNowPage.pageNum=1;
globalNowPage.pageCount=10;
//调用上边的方法，要传入分页，第一页和对应的每页展示条数
$("#body2 .search #submit").click(function(){//用户管理搜索
getUserTask1(globalNowPage.pageNum,globalNowPage.pageCount);
});
//除搜索调用外还有，初始点击页面的时候加载，页调用getUserTask1即可
html代码核心代码
<!-- 在线用户管理模块 -->
<div class="infobody" id="body1">
<!-- 标题 -->
<div class="title"><label>在线用户管理</label></div>
<!-- 搜索 -->
<div class="search">
用户id：<input type="text" id="user_id">
访问ip：<input type="text" id="requestip">
用户名：<input type="text" id="username">
在线状态：<select id="onlineType">
<option value="">全部</option>
<option value="1">在线</option>
<option value="0">离线</option>
</select>
在线id:<input type="text" id="queryid">
<input type="button" id="submit" value="搜索" />
</div>
<!-- 内容 -->
<div class="infoIn"></div>
<!-- 分页 -->
<div class="pageUitl"></div>
</div>
代码思路介绍
1.这写代码中第一个div class="infobody" id="body1"
2. class=infobody 在css设置样式 进行统一化，id=body1 进行单独化
3.js中加载或操作的时候使用id进行加载加事件 点击悬浮等等
4.让这个代码随意嵌入任何位置，可从infobody 这个css进行修改，宽度嵌入到对应的页面中
5.或通过iframe的方式进行加载 infobody 设置最大宽度即可，然后嵌入页面的设置宽高大小即可
6. 使用 iframe的优势及是 在写项目大后便于多人开发，没人一个单独的代码文件，嵌入到总的iframe的服务中去
7. 总页面iframe 进行对应的按钮绑定对应的页面地址，加载，这样会很方便加载宽度页会很方便的自动适应起来 ok
css对应的代码
.infobody{
background:#000;
}
.infobody .title{
height:30px;
line-height:30px;
background:rgb(197, 194, 194);
padding-left:10px;
}
.infobody .search{
line-height:30px;
background:rgb(216, 211, 211);
/* padding-left:10px; */
float: left;
width: 100%;
}
.infobody .search input{
width:100px;
}
.infobody .infoIn{
float: left;
width: 100%;
background:rgb(216, 211, 211);
}
.infobody .pageUitl{ float: left;
width: 100%;
height:50px; line-height:50px;
background:rgb(167, 163, 163);
}
table{
width:100%;
text-align:center;
line-height:30px;
}
思路介绍
这是一些基础代码，可再进行扩展代码，
总的思路是 宽度定义好即可
css 表格样式 加 出发事件，这是奇数行 偶数行 和悬浮事件，省去到js中设置
/* 奇数行 */
table tbody tr:nth-child(odd){
background: #ffffff;
}
/* 偶数行 */
table tbody tr:nth-child(even){
background: #EBF5FF;
/* transform:background 0.6s ; */
/* transition:background 1s ; */
}
/* 悬浮事件 */
#tableajzx1GRWQZ table tbody tr:hover{
/* background:#def4ff; */
background:#cfefff;
}
再献上一个批量修改页面表格中 tr td div 中 或 tr td 中的值，判断值超过几位数后变成 添加一个title字段，另外展示改成 几位数加...展示
//遍历全文tr td 超过字数的后边用... 当前tr添加 title
/**
* 遍历全文tr td 超过字数的后边用... 当前tr添加 title
*
* updateTableTbodyTrTdInfo("table tbody tr td",7);
* @param {*} ele tbody元素
* @param {*} num 字数
*/
var updateTableTbodyTrTdInfo = function(ele,num){
console.log(ele)
$.each($(ele),function(k,y){
var nowRest = $(this);
if(nowRest.text().length>num){
nowRest.attr("title",nowRest.text());
nowRest.text(nowRest.text().substr(0,num)+"...");
}else{
//不做任何操作
}
});
}
这个再这里好像没用，这个使用方法也如上边说的一样
加载放到js最后调用即可，快速批量更新页面表格内容
加送个便于迁移的css ,直接用这个
.search input,select{
width:100px;
height:26px;
line-height:26px;
margin:10px auto;
}
.search {
padding-left:10px;
text-align: left;
}
.search #submit{
background-color: #2C8CF0;
color:#fff;
cursor:pointer;
}
极限升级 更方便的调用方式js
var getDataToTabeleTask1 = function(pageNum,pageCount) {
globalNowPage.pageNum=pageNum;
globalNowPage.pageCount=pageCount;
var params = {
url: "/Service/query?zp_wqr_type=sxs",
data: {
pageNum: globalNowPage.pageNum
,pageCount: globalNowPage.pageCount
,zp_name :$("#queryName").val()
,queryid :$("#queryId").val()
,zp_zuozhe :$("#queryAuthor").val()
},
callback: function(data) {
//表格加载数据
addTableGrewqrYXBGV2(data);
//字数多得简字+...
updateTableTbodyTrTdInfo(" #tableajzx1GRWQZ table tbody tr td div",7);
//加载分页
var pageParams ={
pageNum: globalNowPage.pageNum
,pageCount:globalNowPage.pageCount
,totalNum:data.totalCount
,id:".index3 .pageUitl"//新模块修改位置
,callbackFun:"getDataToTabeleTask1(params.pageNum,params.pageCount);"//新模块修改位置
}
addPagingUitl(pageParams);
}
};
getService(params);
}
//搜索
$(".index3 #submit").click(function(){
getDataToTabeleTask1(globalNowPage.pageNum,globalNowPage.pageCount);
});
success ok
持续更新
