<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<style type="text/css">
{
margin: 0;
padding: 0;
}
#content {
margin: auto;
width: 400px;
border: 1px solid black;
}
on {
color: red
}
off {
color: black
}
body {
font-family: "Courier New"
}
ul {
padding: 10px 0px 10px 45px;
}
ul li {
color: red
}
</style>
<script type="text/javascript">
windowonload = function() {
Pagearr = PagepushArr();
PagesetClickPageNum();
PageallContent("null");
}
var Page = {
defaultPerPageNum: 4,
arr: null,
removedBlankStr: function(str) {
var regex = /^\s|\s$/g;
return strreplace(regex, "");
},
setTotalPageNums: function() {
var pp = Number(PageperPageNum('t1'));
var pnums = Pagearrlength / pp > parseInt(Pagearrlength / pp) parseInt(Pagearrlength / pp) + 1 : Pagearrlength / pp;
var div = documentgetElementById('pagenum');
divinnerHTML = "";
for (var i = 0; i < pnums; i++) {
var a = documentcreateElement('a');
ahref = "#";
ainnerHTML = i + 1;
asetAttribute('class', 'off');
divappendChild(a);
divinnerHTML += " ";
}
PagesetClickPageNum();
},
perPageNum: function(PerPageNum) {
var pv = documentgetElementById(PerPageNum)value;
pv = PageremovedBlankStr(pv);
if ("" == pv || isNaN(pv) || (new RegExp(/^[-][0]+$/g)test(pv)) || pv < 0) {
pv = PagedefaultPerPageNum;
documentgetElementById(PerPageNum)value = pv;
}
documentgetElementById('p1')innerHTML = pv;
return pv;
},
getClickPageNum: function(diva) {
return parseFloat(divainnerHTML);
},
setClickPageNum: function() {
var divx = documentgetElementById('pagenum');
var a = divxchildren;
var len = alength;
for (var i = 0; i < len; i++) {
a[i]onclick = function() {
thisclassName = "on";
PageallContent(this);
};
}
},
pushArr: function() {
var arr = new Array();
var ul = documentgetElementById('ul1');
var len = ulchildrenlength;
for (var i = 0; i < len; i++) {
arrpush(ulchildren[i]);
}
return arr;
},
allContent: function(divb) {
var ul = documentgetElementById('ul1');
ulinnerHTML = "";
var pp = parseFloat(thisperPageNum('t1'));
if ("null" == divb) {
divb = documentgetElementById('pagenum')children[0];
divbclassName = "on";
}
var pg = thisgetClickPageNum(divb); // 1 2 3
var ppj = pp (pg - 1); // 0 4 8
var end = ppj + pp; // 4 8 12
var arr = thisarr;
var pnums = arrlength / pp > parseInt(arrlength / pp) parseInt(arrlength / pp) + 1 : arrlength / pp;
for (var i = ppj; i < end; i++) {
var a = arr[i];
if (null != a) {
ulappendChild(a);
}
}
},
doAction: function() {
PageperPageNum('t1');
PagesetTotalPageNums();
PageallContent("null");
}
};
</script>
</HEAD>
<BODY>
<div id='content'>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<div id="pagenum"><a href="#" class="on">1</a> <a href="#">2</a> <a href="#">3</a>
</div>
<input type="text" value="4" id="t1" />
<input type="button" value="set" onclick="PagedoAction();" /> Each Page
<a id="p1"></a>Records</div>
</BODY>
</HTML>
分页,让后端添加分页查询,以节点数统计数据条数进行展示。(但实际需求中较少,一般树形表格都是不分页)。
2
将请求到的树形数组数据备份(tableDataCopy),初始化仅仅展示指定层级(如第一层树)的数据,将第一层下面的所有的children全部置为null,并记录存在children
首先，最简单的先渲染一个表格，参考官方示例：
这里先讲讲一些渲染细节：
layui内部就是根据cols属性里面每项的field字段来输出数据（该字段跟后台返回的数据字段一致即可输出）。
另外，layui拼接html字符串的方式多次应用数组join方法的方式，这种方式值得安利一波：
否则用传统方式拼接html字符串就相形见绌了（不推荐）：
接着，看一下分页：
从图中可以看出，我们请求地址没加请求参数，layui自动帮我们添加了page，limit的请求参数，默认值分别为1, 10，这是开启了分页的缘故(page: true)。那么，请求参数名是否可以定制呢？答案是可以的，参考request属性：
同样，响应参数名也是可以定制的，参考response属性：
注意，以上只是定制了参数名字而已，接下来才是重头戏：定制数据格式，参考parseData属性：
parseData可以帮助我们定制好与layui对应的表格数据格式，从而输出表格，这是很有用的，毕竟后端前辈返回的数据格式未必跟layui的一致呀。有了以上3种定制方式，我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页，下文提及的方式可不是真正的分页。
-----------------------快乐的分割线，前方jojo高能-----------------------
可能也有小伙伴无视了 request、response、parseData 三剑客，转而用起了data属性，过程如下：
拒绝了使用url属性请求，转用jquery ajax请求数据，最后再tableInsreload({ data: resdata })一波，达成666 *** 作。
这种做法从结果上看，似乎是可以的。。。。。。搭嘎，口头挖撸。
因为通过data属性赋值是不会分页去请求后端的，而是直接请求全部数据，然后layui内部进行前端分页处理，这样一来，如果数据量大的话，恐怕页面就要刷好一会儿了o(╥﹏╥)o。（只有通过data方式赋值才会进行前端分页处理，所以url方式可以放心食用）。
在一个页面中有多个Tab的问题可以这样来处理：
参照
工程项目管理/单位工程项目完工管理/申请列表
比如在此页面中有三个Tab切换：
那么要拆成四个页面一个Mange+三个Tab的页面
1、Manage页面：在Tabs中的TabsContent里面要有三个<div></div>这一定要有不能删掉。
<div class="page">
<div class="pageContent">
<div class="tabs" currentindex="2" eventtype="click">
<div class="tabsHeader">
<div class="tabsHeaderContent">
<ul>
<li><a href="aaspx" class="j-ajax"
><span>名称1</span></a></li>
<li><a href="baspx" class="j-ajax"
><span>名称2</span></a></li>
<li><a href="caspx" class="j-ajax"
><span>名称3</span></a></li>
</ul>
</div>
</div>
<div class="tabsContent" >
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
</div>
</div>
</div>
</div>
2、其他的三个页面的格式为：
<div class="panelBar">
<form id="pagerForm"
action="ProjectManage/FinishedProject/FinishedProjectManageAuditFinishedaspx"
method="post">
<input type="hidden" name="status" value="active"/>
<input type="hidden" name="pageNum" />
<input type="hidden" name="numPerPage" value="<%=numPerPageValue%>" />
</form>
<ul class="toolBar">
<li><a class="delete"
href="ProjectManage/FinishedProject/FinishedProjectManageAuditFinishedaspxfuid={sid_fin}"
target="navTabTodo"
title="确定要反审核吗"><span>反审核</span></a></li> </ul>
</div>
<table class="table" layouth="138">
</table>
<div class="panelBar">
<div class="pages">
<span>显示</span>
<select id="numPerPage" runat="server"
onchange="tabPageBreak(gpagejObj('tab2'),{numPerPage:thisvalue})">
<option value="3" selected="selected">3</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>
<span>条，共<%=total %>条</span>
</div>
<div class="pagination" targettype="navTab" totalcount="<%=total
%>" numperpage="<%=numPerPageValue %>" currentpage="<%=pageNum %>" tab="tab2">
</div>
</div>
3、在其他的三个页面中一开始就应该写<div class="panelBar"></div
class="panelBar">，前面的样式不需要，因为我们加载的时候前面的样式已经加载了所以只需要从panelBar开始加载即可。
比如上面显示处理分页的pagerForm也可以放到pagelBar里面。不能放到外面，不会加载的。
4、对于分页因为涉及到多个Tab的同时分页的问题，但是一个页面只有一个pagerForm考虑到假如修改为多个pagerForm的话，问题更加繁琐，
所以现在我们拆开来处理。里面的分页稍作了修改，以前我们用navTabPageBreak()；现在我们用tabPageBreak并将当前tab2加了前缀的的值传到脚本中。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）