Layui数据表格&弹出层
什么是layui？
经典模块化前端框架
ui框架,前端框架,JS组件
Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。
首先讲数据表格把我感觉layui得数据表格对我们后端开发人员是非常友好的所有有时间就看了看文档把他学会了
多看文档！ 主要还是数据表格 其他没用讲的必要 取镜像网站复制就行了
官方示例
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: '/demo/table/user.json' //数据接口
,page: true //开启分页
,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}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});
</script>
三种渲染方式：我常用的是方法渲染!
| 方式 | 机制 | 适用场景 | |
|---|---|---|---|
| 01. | 方法渲染 | 用JS方法的配置完成渲染 | （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。 |
| 02. | 自动渲染 | HTML配置，自动渲染 | 无需写过多 JS，可专注于 HTML 表头部分 |
| 03. | 转换静态表格 | 转化一段已有的表格元素 | 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可 |
方法渲染实现
其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个 选择器：
<table id="demo" lay-filter="test"></table>
<script>中的
var table = layui.table;
//执行渲染
table.render({
elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
,height: 315 //容器高度
,cols: [{}] //设置表头
//,…… //更多参数参考右侧目录：基本参数选项
});
自动渲染实现
所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：
\1) 带有 class=“layui-table” 的
标签。\2) 对标签设置属性 lay-data="" 用于配置一些基础参数
\3) 在
| 标签中设置属性*lay-data=""*用于配置表头信息 |
|---|
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user.json', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">签名</th>
<th lay-data="{field:'experience', sort: true}">积分</th>
<th lay-data="{field:'score', sort: true}">评分</th>
<th lay-data="{field:'classify'}">职业</th>
<th lay-data="{field:'wealth', sort: true}">财富</th>
</tr>
</thead>
</table>
静态表格就不说了 感觉没什么用
以上是官方示例
现在说说我自己的使用和心得的把 我一般用于增删改查
查实现
jsp
<table id="demo" lay-filter="test"> </table>
<button onclick="ins()" class="layui-btn layui-btn-danger">
<i class="glyphicon glyphicon-plus-sign"></i>导出表格数据
</button>
function ins() {
table.exportFile(ins1.config.id, limitCount, 'xls');
}
//注意 都在 layui.use([‘table’, ‘jquery’, ‘layer’, ‘form’], function () {里面才有用
var limitCount = "";
var table = "";
var ins1 = "";
var form = "";
var img = "";
var index = "";
layui.use(['table', 'jquery', 'layer', 'form'], function () {
form = layui.form;//获取表单
table = layui.table;//获取当前表格
var $ = layui.jquery;//获取jquery对象
upload = layui.upload//上传文件
, element = layui.element
ins1 = table.render({ //渲染
elem: '#demo', //指定原始table容器
width: '600px'//设定容器宽度
,
height: 'full-200'//设定容器高度
,limit:5 //每页显示的条数（默认 10）。值需对应 limits 参数的选项。注意：优先级低于 page 参数中的 limit 参数
, limits: [10, 10, 10, 10, 10]//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。注意：优先级低于 page 参数中的 limits 参数
, url: 'getAllpost' //数据接口 就是到后台查询数据的地方
, page: true //开启分页
, skin: "nob" //设定表格各种外观、尺寸等
, method: 'post' //请求方式
, parseData: function (res) {//res 即为原始返回的数据
return {
"code": 0,//解析接口状态
"msg": "",//解析提示文本
"count": 1000, //解析数据长度
"data": res, //解析数据列表
}
},
where: { //传值到后台
Bans: 0
}
//对应实体类的列名
, cols: [[ //表头
{field: 'pid', align: "center", title: '编号', width: 180}
, {field: 'ptitle', align: "center", title: '标题', width: 180}
, {field: 'pcontent', align: "center", title: '详细信息', width: 180}
, {
field: 'pdate', align: "center", title: '发表时间', width: 180
}
, {
field: 'u.uname', align: "center", title: '发表用户', width: 180, templet: function (u) {
return u.u.uname
}
}
, {field: 'good', align: "center", title: '好评数', width: 180}
, {
field: 'bad', align: "center", title: '差评数', width: 180
}, {field: '', title: '操作', width: 250, toolbar: '#demo2'}//#demo2绑定按钮等等
//在table 写 如果你需要增删改
/**
*/
]]
, page: true,//开启分页（默认：false）。支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）
//用于导出数据 获取当前一页所有的数据
done: function (res, curr, count) {
limitCount = res.data;
}
});
//监听表格
//表格必须加lay-filter="test"
table.on('tool(test)', function (obj) {
//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
var flag = obj;
if (layEvent === 'add') {
if ($("#name").val() != data.u.uname && $("#gl").val() == 1 || $("#name").val() == null) {
layer.msg("禁止更改他人信息!", {icon: 5});
return;
}
url = "update";
fl = "修改!";
var
index = layer.open({ //打开一个弹层 讲白了就是一个form 形式的表单隐藏在界面上 使用弹层打开非常号看
type: 1 //Page层类型
,
area: ['570px', '400px']
,
title: '修改'
, success:
function () {
form.val("from", data) //获取表格的数据填充到表单 表单input的name要对应表单名称
}
,
shade: 0.6 //遮罩透明度
,
maxmin: false //允许全屏最小化
,
anim: 6 //0-6的动画形式，-1不开启
,
content: $("#div").show(),
end: function (res) {
$("#div").css("display", 'none');
}
});
$("#pid").attr("readonly", "readonly")
$("#layui").html("修改");
url = "update";
} else if (layEvent === 'delete') {
if ($("#name").val() != data.u.uname && $("#gl").val() == 1 || $("#name").val() == null) {
layer.msg("禁止删除他人信息!", {icon: 5});
return;
}
layer.msg('删除操作');
layer.confirm('真的删除ID为：' + data.pid + "的用户吗?", function (index) {
$.ajax({
url: 'delete',
type: 'get',
data: {'id': data.pid},//向服务端发送删除的id
success: function (suc) {
if (suc == 1) {
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.msg("删除成功", {icon: 1});
} else {
layer.msg("删除失败", {icon: 5});
}
}
});
});
}
/**
* 修改 增加
*/
//获取表单的
class="layui-form formDemo"
form.on('submit(formDemo)', function (data) {
$.ajax({
url: url,
type: 'post', data: data.field,
dataType: 'json',
success: function (suc) {
if (suc == 1) {
layer.close(index);
ins1.reload(); //重新渲染表单 将修改的数据刷新
layer.msg(fl + "成功", {icon: 1});
} else {
layer.msg(fl + "失败", {icon: 5});
}
}
});
return false;
})
})
;