标签：text layer where jquery complete 方法 some code 单元素
分页? <font color="red">模块加载名称：laypage</font>
? laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分页</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="test1"></div>
</body>
<script src="layui/layui.js"></script>
<script type="text/javascript">
layui.use(‘laypage‘, function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: ‘test1‘ //注意，这里的 test1 是 ID，不用加 # 号
,count: 50 //数据总数，从服务端得到
});
});
</script>
</html>通过核心方法：laypage.render(options) 来设置基础参数。
| 参数选项 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| elem | 指向存放分页的容器，值可以是容器ID、DOM对象。如： 1. elem: ‘id‘ 注意：这里不能加 # 号 2. elem: document.getElementById(‘id‘) | String/Object | - |
| count | 数据总数。一般通过服务端得到 | Number | - |
| limit | 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。 | Number | 10 |
| limits | 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框 | Array | [10, 20, 30, 40, 50] |
| curr | 起始页。一般用于刷新类型的跳页以及HASH跳页。如：<br />// 开启location.hash的记录<br />laypage.render({ <br /> elem: ‘test1‘ ,<br /> count: 500 ,<br /> // 获取起始页 <br /> curr: location.hash.replace(‘#!fenye=‘, ‘‘)<br /> // 自定义hash值<br /> ,hash: ‘fenye‘ <br />}); ` | Number | 1 |
| groups | 连续出现的页码个数 | Number | 5 |
| prev | 自定义“上一页”的内容，支持传入普通文本和HTML | String | 上一页 |
| next | 自定义“下一页”的内容，同上 | String | 下一页 |
| first | 自定义“首页”的内容，同上 | String | 1 |
| last | 自定义“尾页”的内容，同上 | String | 总页数值 |
| layout | 自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域） | Array | [‘prev‘, ‘page‘, ‘next‘] |
| theme | 自定义主题。支持传入：颜色值，或任意普通字符。如： 1. theme: ‘#c00‘ 2. theme: ‘xxx‘ //将会生成 class="layui-laypage-xxx" 的CSS类，以便自定义主题 | String | - |
| hash | 开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会自动对url追加：#!hash值={curr} 利用这个，可以在页面载入时就定位到指定页 | String/Boolean | false |
当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
laypage.render({
elem: ‘page‘
,count: 100 //数据总数，从服务端得到
,groups:10 // 连续出现的页码个数
,layout:[‘prev‘, ‘page‘, ‘next‘,‘limit‘,‘count‘] // 自定义排版
,limits:[5,10,20] // layout属性设置了limit值，可会出现条数下拉选择框
,jump: function(obj, first){
// obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something
}
}
});? <font color="red">模块加载名称：table</font>
? 创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table数据表格</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table id="demo"></table>
</body>
<script src="layui/layui.js" type="text/javascript" ></script>
<script type="text/javascript">
layui.use(‘table‘, function(){
var table = layui.table;
// 第一个实例
table.render({
elem: ‘#demo‘
,url: ‘user.json‘ // 数据接口
,cols: [[ // 表头
{field: ‘id‘, title: ‘ID‘, width:80, sort: true, fixed: ‘left‘}
,{field: ‘username‘, title: ‘用户名‘, width:80}
,{field: ‘sex‘, title: ‘性别‘, width:80, sort: true}
,{field: ‘city‘, title: ‘城市‘, width:80}
,{field: ‘sign‘, title: ‘签名‘, width: 177}
]]
});
});
</script>
</html>
数据接口 user.json
{
"code": 0,
"msg": "",
"count": 50,
"data": [{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0"
},
{
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1"
},
{
"id": 10002,
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2"
},
{
"id": 10003,
"username": "user-3",
"sex": "女",
"city": "城市-3",
"sign": "签名-3"
},
{
"id": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "签名-4"
}
]
}| 机制 | 适用场景 | |
|---|---|---|
| 方法渲染 | 用JS方法的配置完成渲染 | （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。 |
| 自动渲染 | HTML配置，自动渲染 | 无需写过多 JS，可专注于 HTML 表头部分 |
| 转换静态表格 | 转化一段已有的表格元素 | 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可 |
将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器
<table id="demo"></table>渲染表格
layui.use(‘table‘, function(){
var table = layui.table;
// 执行渲染
table.render({
elem: ‘#demo‘ // 指定原始表格元素选择器（推荐id选择器）
,url: ‘user.json‘ // 数据接口
,height: 315 // 容器高度
,page:true // 开启分页
,cols: [[ // 设置表头
{field: ‘id‘, title: ‘ID‘}
,{field: ‘username‘, title: ‘用户名‘}
,{field: ‘sex‘, title: ‘性别‘}
]]
});
});注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作。
? 在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。
? 1) 带有 class="layui-table" 的 <table> 标签。
? 2) 对标签设置属性 lay-data="" 用于配置一些基础参数
? 3) 在 <th> 标签中设置属性lay-data=""用于配置表头信息
<table class="layui-table" lay-data="{url:‘user.json‘}">
<thead>
<tr>
<th lay-data="{field:‘id‘}">ID</th>
<th lay-data="{field:‘username‘}">用户名</th>
<th lay-data="{field:‘sex‘, sort: true}">性别</th>
</tr>
</thead>
</table>? 页面已经存在了一段有内容的表格，由原始的table标签组成，只需要赋予它一些动态元素。
<table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:‘username‘, width:100}">昵称</th>
<th lay-data="{field:‘experience‘, width:80, sort:true}">积分</th>
<th lay-data="{field:‘sign‘}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>66</td>
<td>人生就像是一场修行a</td>
</tr>
</tbody>
</table>执行用于转换表格的JS方法
layui.use(‘table‘, function(){
var table = layui.table;
// 转换静态表格
table.init(‘demo‘, {
height: 315 // 设置高度
// 支持所有基础参数
});
});// 场景一：下述方法中的键值即为基础参数项
table.render({
height: 300
,url: ‘user.json‘
});
// 场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:‘user.json‘}" lay-filter="demo"> …… </table>
// 更多场景：下述 options 即为含有基础参数项的对象
> table.init(‘filter‘, options); // 转化静态表格
> var tableObj = table.render({});
tableObj.reload(options); // 重载表格<!-- HTML代码 -->
<table id="demo"></table>// JS实现代码
layui.use(‘table‘, function(){
var table = layui.table;
// 执行渲染
table.render({
elem: ‘#demo‘ // 指定原始表格元素选择器（推荐id选择器）
,url: ‘user.json‘ // 数据接口
,height: 315 // 容器高度
,page:true // 开启分页
,cols: [[ // 设置表头
{field: ‘id‘, title: ‘ID‘}
,{field: ‘username‘, title: ‘用户名‘}
,{field: ‘sex‘, title: ‘性别‘}
]]
});
});<table id="demo" lay-filter="demo"></table>
<!-- 表格工具栏 -->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<!-- lay-event 给元素绑定事件名 -->
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">
获取选中行数据
</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">
获取选中数目
</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">
验证是否全选
</button>
</div>
</script>
<!-- 表头工具栏 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>layui.use(‘table‘, function(){
var table = layui.table;
// 执行渲染
table.render({
elem: ‘#demo‘ // 指定原始表格元素选择器（推荐id选择器）
,url: ‘user.json‘ // 数据接口
,height: 315 // 容器高度
,page:true // 开启分页
,cols: [[ // 设置表头
{field: ‘id‘, title: ‘ID‘}
,{field: ‘username‘, title: ‘用户名‘}
,{field: ‘sex‘, title: ‘性别‘}
,{title:‘操作‘, toolbar: ‘#barDemo‘} // 绑定表头工具栏
]]
,toolbar: ‘#toolbarDemo‘ // 开启头部工具栏，并为其绑定左侧模板
});
/**
* 头工具栏事件
* 语法：
table.on(‘toolbar(demo)‘, function(obj){
});
注：demo表示选择器元素上设置的lay-filter属性值
*/
table.on(‘toolbar(demo)‘, function(obj){
// obj.config.id 当前选择器的id属性值，即demo
// 获取当前表格被选中的记录对象，返回数组
var checkStatus = table.checkStatus(obj.config.id);
// obj.event 得到当前点击元素的事件名
switch(obj.event){
case ‘getCheckData‘:
// 获取被选中的记录的数组
var data = checkStatus.data;
// 将数组数据解析成字符串
layer.alert(JSON.stringify(data));
break;
case ‘getCheckLength‘:
var data = checkStatus.data;
layer.msg(‘选中了：‘+ data.length + ‘ 个‘);
break;
case ‘isAll‘:
// checkStatus.isAll 判断记录是否被全选
layer.msg(checkStatus.isAll ? ‘全选‘: ‘未全选‘);
break;
// 自定义头工具栏右侧图标 - 提示
case ‘LAYTABLE_TIPS‘:
layer.alert(‘这是工具栏右侧自定义的一个图标按钮‘);
break;
};
});
/**
* 监听行工具事件
*/
table.on(‘tool(demo)‘, function(obj){
// 得到当前操作的tr的相关信息
var data = obj.data;
if(obj.event === ‘del‘){
// 确认框
layer.confirm(‘真的删除行么‘, function(index){
// 删除指定tr
obj.del();
// index 当前弹出层的下标，通过下标关闭弹出层
layer.close(index);
});
} else if(obj.event === ‘edit‘){
// 输入框
layer.prompt({
// 表单元素的类型 0=文本框 1=密码框 2=文本域
formType: 0
,value: data.username
}, function(value, index){
// 修改指定单元格的值
// value表示输入的值
obj.update({
username: value
});
// 关闭弹出层
layer.close(index);
});
}
});
});<table class="layui-table" lay-data="{url:‘user.json‘, id:‘demo‘}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{type:‘checkbox‘}">ID</th>
<th lay-data="{field:‘id‘, sort: true}">ID</th>
<th lay-data="{field:‘username‘, sort: true, edit: ‘text‘}">用户名</th>
<th lay-data="{field:‘sex‘, edit: ‘text‘}">性别</th>
<th lay-data="{field:‘city‘, edit: ‘text‘}">城市</th>
<th lay-data="{field:‘experience‘, sort: true, edit: ‘text‘}">积分</th>
</tr>
</thead>
</table>layui.use(‘table‘, function(){
var table = layui.table;
// 监听单元格编辑
table.on(‘edit(demo)‘, function(obj){
var value = obj.value // 得到修改后的值
,data = obj.data // 得到所在行所有键值
,field = obj.field; // 得到字段
layer.msg(‘[ID: ‘+ data.id +‘] ‘ + field + ‘ 字段更改为：‘+ value);
});
});<div class="demoTable">
搜索ID：
<div class="layui-inline">
<input class="layui-input" name="id" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" id="searchBtn">搜索</button>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"></table> layui.use(‘table‘, function(){
var table = layui.table;
var $ = layui.jquery; // 获取jquery对象
// 执行渲染
table.render({
elem: ‘#demo‘ // 指定原始表格元素选择器（推荐id选择器）
,url: ‘user.json‘ // 数据接口
,page:true // 开启分页
,cols: [[ // 设置表头
{type: ‘checkbox‘, fixed: ‘left‘} // 设置复选框
,{field: ‘id‘, title: ‘ID‘}
,{field: ‘username‘, title: ‘用户名‘}
,{field: ‘sex‘, title: ‘性别‘}
]]
});
// 给指定元素绑定事件
$(document).on(‘click‘, ‘#searchBtn‘, function(data) {
// 获取搜索框对象
var demoReload = $(‘#demoReload‘);
table.reload(‘demo‘, {
where: { // 设定异步数据接口的额外参数，任意设
id: demoReload.val()
}
,page: {
// 让条件查询从第一页开始查询，不写则从当前页开始查询，此页之前的数据将不纳入条件筛选
curr: 1 // 重新从第 1 页开始
}
}); // 只重载数据
});
});标签：text layer where jquery complete 方法 some code 单元素
原文地址：https://blog.51cto.com/14819669/2505919
