mirror of
https://gitee.com/layui/layui.git
synced 2025-11-24 16:43:14 +08:00
Add docs
This commit is contained in:
贤心
258
docs/laypage/detail/demo.md
Normal file
258
docs/laypage/detail/demo.md
Normal file
@@ -0,0 +1,258 @@
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '普通用法'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-normal-1"></div>
|
||||
<div id="demo-laypage-normal-2"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 普通用法
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-normal-1',
|
||||
count: 50 // 数据总数
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-normal-2',
|
||||
count: 100 // 数据总数
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-theme" class="ws-anchor ws-bold">自定义主题</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-theme-1"></div>
|
||||
<div id="demo-laypage-theme-2"></div>
|
||||
<div id="demo-laypage-theme-3"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 自定义主题
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-theme-1',
|
||||
count: 100,
|
||||
theme: '#1E9FFF'
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-theme-2',
|
||||
count: 100,
|
||||
theme: '#FF5722'
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-theme-3',
|
||||
count: 100,
|
||||
theme: '#FFB800'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-text" class="ws-anchor ws-bold">自定义文本</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-text"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 自定义文本
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-text',
|
||||
count: 100,
|
||||
first: '首页',
|
||||
last: '尾页',
|
||||
prev: '<em>←</em>',
|
||||
next: '<em>→</em>'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-pn-hide" class="ws-anchor ws-bold">不显示上一页、下一页</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-pn-hide"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 不显示上一页、下一页
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-pn-hide',
|
||||
count: 100,
|
||||
prev: false,
|
||||
next: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-pn-show" class="ws-anchor ws-bold">只显示上一页、下一页、当前页</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-pn-show"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 只显示上一页、下一页、当前页
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-pn-show',
|
||||
count: 50,
|
||||
groups: 1,
|
||||
first: false,
|
||||
last: false,
|
||||
layout: ['prev', 'page','next'],
|
||||
jump: function(obj, first){
|
||||
// 首次不执行
|
||||
if(!first){
|
||||
layer.msg('第 '+ obj.curr +' 页');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-layout" class="ws-anchor ws-bold">自定义排版</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-layout-1"></div>
|
||||
<div id="demo-laypage-layout-2"></div>
|
||||
<div id="demo-laypage-layout-3"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 自定义排版
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-layout-1',
|
||||
count: 1000,
|
||||
layout: ['limit', 'prev', 'page', 'next']
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-layout-2',
|
||||
count: 1000,
|
||||
layout: ['prev', 'next', 'page']
|
||||
});
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-layout-3',
|
||||
count: 1000,
|
||||
layout: ['page', 'count']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-limits" class="ws-anchor ws-bold">自定义每页条数的选择项</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-limits"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 自定义每页条数的选择项
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-limits',
|
||||
count: 1000,
|
||||
limit: 100,
|
||||
limits: [100, 300, 500],
|
||||
layout: ['prev', 'page', 'next', 'limit']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-all" class="ws-anchor ws-bold">完整显示</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-all"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 完整显示
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-all', // 元素 id
|
||||
count: 100, // 数据总数
|
||||
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
|
||||
jump: function(obj){
|
||||
console.log(obj);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-hash" class="ws-anchor ws-bold">高级 - 开启 HASH</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-hash"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 开启 HASH
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-hash',
|
||||
count: 500,
|
||||
curr: location.hash.replace('#!curr=', ''), // 初始获取 hash 值为 curr 的当前页
|
||||
hash: 'curr' // 自定义 hash 名称
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-data" class="ws-anchor ws-bold">高级 - 将一段已知数组分页展示</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="demo-laypage-data"></div>
|
||||
<div id="demo-laypage-data-view"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var laypage = layui.laypage;
|
||||
|
||||
// 将一段已知数组分页展示
|
||||
var data = ["北京","上海","广州","深圳","杭州","长沙","合肥","宁夏","成都","西安","南昌","上饶","沈阳","济南","厦门","福州","九江","宜春","赣州","宁波","绍兴","无锡","苏州","徐州","东莞","佛山","中山","成都","武汉","青岛","天津","重庆","南京","九江","香港","澳门","台北"]; // 测试数据
|
||||
|
||||
laypage.render({
|
||||
elem: 'demo-laypage-data',
|
||||
count: data.length,
|
||||
jump: function(obj){
|
||||
// 模拟渲染
|
||||
document.getElementById('demo-laypage-data-view').innerHTML = function(){
|
||||
var arr = [];
|
||||
var thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
|
||||
layui.each(thisData, function(index, item){
|
||||
arr.push(item);
|
||||
});
|
||||
return arr.join('，');
|
||||
}();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
245
docs/laypage/detail/options.md
Normal file
245
docs/laypage/detail/options.md
Normal file
@@ -0,0 +1,245 @@
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="100">
|
||||
<col width="100">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性名</th>
|
||||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>elem</td>
|
||||
<td>
|
||||
|
||||
绑定分页容器。值可以是容器 `id` 或 DOM 对象。如：
|
||||
|
||||
- `elem: 'id'` 注意：这里不能加 `#` 号
|
||||
- `elem: document.getElementById('id')`
|
||||
|
||||
</td>
|
||||
<td>string<br>DOM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>count</td>
|
||||
<td>
|
||||
|
||||
数据总数。一般通过后端得到
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>limit</td>
|
||||
<td>
|
||||
|
||||
每页显示的条数。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`10`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>limits</td>
|
||||
<td>
|
||||
|
||||
每页条数的选择项。 若 `layout` 参数开启了 `limit` ，则会出现每页条数的 select 选择框
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>
|
||||
|
||||
`[10,…,50]`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>curr</td>
|
||||
<td>
|
||||
|
||||
初始化当前页码。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`1`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>groups</td>
|
||||
<td>
|
||||
|
||||
连续出现的页码数量
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`5`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>prev</td>
|
||||
<td>
|
||||
|
||||
自定义“上一页”的内容，支持传入普通文本和 HTML
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`上一页`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>next</td>
|
||||
<td>
|
||||
|
||||
自定义“下一页”的内容，用法同上。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`下一页`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>first</td>
|
||||
<td>
|
||||
|
||||
自定义“首页”的内容，用法同上。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`1`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>last</td>
|
||||
<td>
|
||||
|
||||
自定义“尾页”的内容，用法同上。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
*自动获得*
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout</td>
|
||||
<td>
|
||||
|
||||
自定义分页功能区域排版。可自由排列，可选值有：
|
||||
|
||||
- `count` 数据总数区域
|
||||
- `prev` 上一页区域
|
||||
- `page` 分页区域
|
||||
- `next` 下一页区
|
||||
- `limit` 条目选项区域
|
||||
- `refresh` 页面刷新区
|
||||
- `skip` 快捷跳页区
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>
|
||||
|
||||
<button class="layui-btn layui-btn-sm layui-btn-primary" lay-layer="{
|
||||
title: 'layout 属性默认值',
|
||||
content: '<div>layout: [\'prev\',\'page\',\'next\']</div>'
|
||||
}">查看默认值</button>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>theme</td>
|
||||
<td>
|
||||
|
||||
自定义主题。支持传入：颜色值或任意普通字符。如：
|
||||
|
||||
- `theme: '#c00'` 直接设置当前页按钮背景色
|
||||
- `theme: 'xxx'` 会生成 `class="layui-laypage-xxx"` 的 CSS 类，以便自定义主题
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hash</td>
|
||||
<td>
|
||||
|
||||
设置 `hash` 名称。设置该属性后，点击分页将会自动对当前 `url` 追加：`#{hash}={curr}`，从而在页面刷新时初始化当前页码。[#详细用法参考示例](#demo-hash)
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
|
||||
[jump](#options.jump)
|
||||
|
||||
</td>
|
||||
<td colspan="3">
|
||||
|
||||
<div id="options.jump" class="ws-anchor">分页跳转后的回调函数。函数返回两个参数：</div>
|
||||
|
||||
- 参数 `obj` : 当前分页相关的所有选项值
|
||||
- 参数 `first` : 是否首次渲染，一般用于初始加载的判断
|
||||
|
||||
```
|
||||
laypage.render({
|
||||
elem: 'id',
|
||||
count: 70, // 数据总数，从后端得到
|
||||
jump: function(obj, first){
|
||||
console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
|
||||
console.log(obj.limit); // 得到每页显示的条数
|
||||
|
||||
// 首次不执行
|
||||
if(!first){
|
||||
// do something
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
37
docs/laypage/index.md
Normal file
37
docs/laypage/index.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: 分页组件 laypage
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 分页组件
|
||||
|
||||
> 分页组件 `laypage` 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div class="ws-detail">
|
||||
{{- d.include("docs/laypage/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var laypage = layui.laypage | 获得 `laypage` 模块。 |
|
||||
| [laypage.render(options)](#render) | laypage 组件渲染，核心方法。 |
|
||||
|
||||
<h2 id="render" lay-toc="{level: 2}">渲染</h2>
|
||||
|
||||
`laypage.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/laypage/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
## 小贴士
|
||||
|
||||
laypage 组件只负责分页本身的逻辑，具体的数据请求及对应的视图渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现，如 table 组件的分页就是采用的 laypage。
|
||||
Reference in New Issue
Block a user