2021-08-08

layer 作为 layui 的内置模块使用
layer作为layui的内置模块使用
var layer;//保存 layer弹出层模块的变量
加载模块
layui.use([‘layer’, ‘form’, ‘table’],
function () {
把layui中的layer弹出层模块加载了
layer = layui.layer;
layer.alert(“这是第一个layer弹出框”);
layer.alert(“加了个图标”,
{
icon: 6, title: ‘这是一个修
改的标题’,
area: [‘500px’, ‘300px’]
});
layer.alert(“点击确定按钮”, function
(index) {
console.log(123); //关闭弹出层
layer.close(index);
})
layer.alert(“关闭？”, {
btn: [‘按钮一’, ‘按钮二’,“按钮三”],
btn2: function () {
console.log(“按钮二被点击了”);
}, btn3: function () {
console.log(“按钮三被点击了”);
}
}, function () {
console.log(“按钮一被点击了”);
})
confirm(“是否确认删除？”);// 询问框
layer.confirm(“是否确认删除？”,
function (index) {
console.log(“点击了确认按钮”);
layer.close(index);
}, function (index) {
console.log(“点击了取消按钮”,
index); });
layer.msg(‘只想弱弱提示’);
layer.msg(‘有表情地提示’, { icon: 6 });
var index = layer.load(2);
layer.close(index);
//使用layui中的日期控件 callback 回
调函数
var layDate;
var layer;
layui.use([‘layer’, ‘laydate’], function ()
{
layDate = layui.laydate;
layer = layui.layer;
//执行一个laydate实例
layDate.render({
//element 元素
elem: “#dateDeme”,
type: ‘datetime’
})
})
Layui 表格基本使用：

1. var table = layui.table;
2. 3. //执行渲染
3. table.render({
4. elem: ‘#demo’ //指定原始表格元素选择器
   （推荐 id 选择器）
5. ,height: 315 //容器高度
6. ,cols: [{}] //设置表头
7. //,…… //更多参数参考右侧目录：基本参数
   选项
8. });
   定义全局变量 layer laytable
   var layer, layuitable;
   var tbstudent;
   加载弹出层 与table表格模块 callbackmm
   layui.use([‘table’, ‘layer’], function () {
   layer = layui.layer;//弹出层
   layuitable = layui.table;//表格
   方法渲染表格 执行渲染
   layuitable.render({})
   tbstudent=layuitable.render({
   配置项
   elem: ‘#demo’,//指定原始 table 容器
   的选择器
   url:
   ‘/main/selectstudentinfor’,//url
   表头的配置
   cols: [[
   { title: ‘序号’, type:
   ‘numbers’ },
   { title: ‘姓名’, field:
   ‘studentname’, align: ‘center’ },
   { title: ‘性别’, field:
   ‘studentsex’, align: ‘center’ },
   { title: ‘身份证号码’, field:
   ‘studentidnum’, sort: true, align: ‘center’ },
   { title: ‘电话号码’, field:
   ‘studenttelphone’, align: ‘center’ },
   { title: ‘地址’, field:
   ‘studentaddress’, fixed: ‘right’ },
   { title: ‘操作’, templet:
   customop, align: ‘center’ }
   ]],
   data: [], //加载本地数据的配置项
   toolbar: true,//开启表格头部工具栏
   区域
   page:true//
   page: {
   limit: 4,//limit每页显示的数据
   条数
   limits: [5, 10, 15, 20]//每页条
   数的选择项
   }
   });
   表格reload 重载
   tabsearchstudent();
   });
   自定义列模板
   function customop(rowdata) {
   console.log(rowdata);
   var str = ‘修改删除’
   return str;
   }
   function tabsearchstudent() {
   var strsearch = $("#txtsearch").val();
   var strsearch =
   document.getelementbyid(“txtsearch”).value;
   重载方法一：
   layuitable.reload(‘id’,{}) 表格的重载
   layuitable.reload(“demo”, {
   url 请求的地址
   url: ‘/main/selectstudentinfor’,
   条件 需要传递到控制器中的参数
   where: {
   strsearch键 对应控制器方法中的
   形参
   strsearch: strsearch
   strsearch值 页面获取的数据
   }
   });
   重载方法二：
   表格实例.reload({…配置项})
   tbstudent.reload({
   url: ‘/main/selectstudentinfor’,
   where: {
   strsearch: strsearch }
9. 以上就是关于 layui 的内置模块使用
10. List item