LayUI
引入LayUI
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Title</title>
<!--引入layui.css-->
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!--具体内容一-->
<!--引入layui.js-->
<script src="layui/layui.js"></script>
</body>
</html>
弹出层
<script>
layui.use(['layer', 'form'], function () {
let layer = layui.layer;
let form = layui.form;
let $ = layui.jquery;
$("#btn0").on('click', function () {
layer.open({
type: 1,//类型，0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
content: "<h2 style='color:red'> helloooooooooooo</h2>",
skin: 'layui-layer-molv',//内置皮肤layui-layer-lan和layui-layer-molv
area: ['800px', '500px'],//自定义宽高
icon: 1,
btn: ['按钮1', '按钮2', '按钮3'],
yes: function (index, layero) {
layer.alert("按钮1");
},
btn2: function () {
layer.alert("按钮2");
},
btn3: function () {
layer.alert("按钮3");
},
cancel: function () {
alert("弹窗已关闭")
},
btnAlign: 'c',//上面按钮居中，l:居左，r:居右，c:居中
closeBtn: 1,//右上角的关闭图标:x,0：关闭，1或者2：开启
shade: 0.6,//遮罩，数字表示透明度，1是全黑，0是关闭
id: 1001,//该弹窗的唯一标志
//maxmin:1,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
fixed: true,//即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可
scrollbar: true,//是否允许出现滚动条
maxWidth: "500px",//最大宽度,只有当area: 'auto'时，maxWidth的设定才有效。
maxHeight: "200px",//最大高度,只有当高度自适应时，maxHeight的设定才有效。
success: function (layero, index) {
alert("弹窗成功弹出");
console.log(layero, index);
}
})
})
$("#btn1").on('click', function () {
layer.open({
type: 1,
content: $("#test01"),
area: ['500px', '300px'],
icon: 2,
maxmin: true
})
})
$("#btn2").on('click', function () {
layer.open({
type: 2,
content: '08.html',
maxmin: true
})
})
$("#btn3").on('click', function () {
layer.open({
type: 3,
content: "加载中",
})
})
$("#btn4").on('click', function () {
layer.open({
type: 4,
content: ['这是内容', '#btn4']
})
})
})
</script>
open属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<button type="button" class="layui-btn" id="btn0">type=0</button>
<button type="button" class="layui-btn" id="btn1">type=1</button>
<button type="button" class="layui-btn" id="btn2">type=2</button>
<button type="button" class="layui-btn" id="btn3">type=3</button>
<button type="button" class="layui-btn" id="btn4">type=4</button>
<button type="button" class="layui-btn" id="btn5">type=5</button>
<div id="test01">
<!--监听下拉框-->
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-inline">
<select name="interest" id="">
<option value="1">写作</option>
<option value="2">阅读</option>
<option value="3">游戏</option>
<option value="4">睡觉</option>
</select>
</div>
</div>
<!--监听复选框-->
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" value="写作" title="写作" lay-filter="fxk">
<input type="checkbox" name="like[read]" value="阅读" title="阅读" lay-filter="fxk">
</div>
</div>
</div>
<!--监听开关-->
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" checked lay-skin="switch" value="开关的值" lay-text="开|关" lay-filter="kg">
</div>
</div>
<!--监听单选框-->
<div class="layui-form-item">
<label for="" class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="1" title="男" lay-filter="sex" checked>
<input type="radio" name="sex" value="0" title="女" lay-filter="sex">
</div>
</div>
<!--监听提交事件-->
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" lay-submit lay-filter="tj">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function () {
let layer = layui.layer;
let form = layui.form;
let $ = layui.jquery;
$("#btn0").on('click', function () {
layer.open({
type: 1,//类型，0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
content: "<h2 style='color:red'> 嵌入文本</h2>",
skin: 'layui-layer-molv',//内置皮肤layui-layer-lan和layui-layer-molv
area: ['800px', '500px'],//自定义宽高
icon: 1,
btn: ['按钮1', '按钮2', '按钮3'],
yes: function (index, layero) {
layer.alert("按钮1");
},
btn2: function () {
layer.alert("按钮2");
},
btn3: function () {
layer.alert("按钮3");
},
cancel: function () {
alert("弹窗已关闭")
},
btnAlign: 'c',//上面按钮居中，l:居左，r:居右，c:居中
closeBtn: 1,//右上角的关闭图标:x,0：关闭，1或者2：开启
shade: 0.6,//遮罩，数字表示透明度，1是全黑，0是关闭
id: 1001,//该弹窗的唯一标志
//maxmin:1,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
fixed: true,//即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可
scrollbar: true,//是否允许出现滚动条
maxWidth: "500px",//最大宽度,只有当area: 'auto'时，maxWidth的设定才有效。
maxHeight: "200px",//最大高度,只有当高度自适应时，maxHeight的设定才有效。
success: function (layero, index) {
alert("弹窗成功弹出");
console.log(layero, index);
}
})
})
$("#btn1").on('click', function () {
layer.open({
type: 1,
content: $("#test01"),
area: ['500px', '400px'],
icon: 2,
maxmin: true
})
})
$("#btn2").on('click', function () {
layer.open({
type: 2,
content: 'https://www.aliyun.com/',
maxmin: true
})
})
$("#btn3").on('click', function () {
layer.open({
type: 3,
content: "加载中",
})
})
$("#btn4").on('click', function () {
layer.open({
type: 4,
content: ['这是内容', '#btn4']
})
})
})
</script>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test1"></table>
<script type="text/html" id="titleTpl">
{{# if(d.sex == '男'){ }}
<a href="#" class="layui-table-link">雄</a>
{{# } else { }}
<a href="#" class="layui-table-link">雌</a>
{{# } }}
</script>
<script type="text/html" id="tablebar1">
<div class="layui-btn-container">
<button type="button" class="layui-btn" id="getAll" lay-event="getAll">获取选中行</button>
<button type="button" class="layui-btn" id="delAll" lay-event="delAll">批量删除</button>
</div>
</script>
<script type="text/html" id="tablebar2">
<div class="layui-btn-container">
<button type="button" class="layui-btn" lay-event="detail">查看</button>
<button type="button" class="layui-btn" lay-event="edit">编辑</button>
<button type="button" class="layui-btn" lay-event="del">删除</button>
</div>
</script>
<script src="layui/layui.js"></script>
<script>
layui.use(['table', 'layer'], function () {
let table = layui.table;
let layer = layui.layer;
let $ = layui.jquery
// 监听头工具栏事件
table.on("toolbar(test1)", function (obj) {
let checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'getAll':
alert("getAll");
if (checkStatus.data.length != 0) {
let dataJson = JSON.stringify(checkStatus.data);
alert(dataJson)
console.log(checkStatus.data[0].username);//获取选中行的数据
console.log(checkStatus.data);//获取选中行的数据
console.log(checkStatus.data.length);//获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll);//表格是否全选
} else {
layer.tips('请先选择数据行', '#getAll')
}
}
})
//监听单元格工具条
table.on('tool(test1)', function (obj) {
let data = obj.data;
let tr = obj.tr
switch (obj.event) {
case 'detail':
alert("查看");
break;
case 'del':
alert('删除');
layer.confirm("真的删除行吗？", function (index) {
obj.del();
layer.close(index)
});
break;
case 'edit':
alert("编辑");
obj.update({
id: "更新后的id"
, username: '更新后的username'
, score: '更新后的评分'
, experience: '更新后的积分'
, sex: '更新后的性别'
, wealth: '更新后的财富'
, city: '更新后的城市'
, sign: '更新后的签名'
, classify: '更新后的职业'
});
break;
}
table.on('edit(test1)',function (obj) {
alert(obj.field);
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
})
table.on('sort(test1)',function (obj) {
alert(obj.field)
console.log(obj.field)
console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
console.log(this); //当前排序的 th 对象
})
table.on('checkbox(test1)',function (obj) {
alert(obj.checked)
})
})
table.render({
elem: '#demo',//对应table的id
height: 'full-200',
defaultToolbar: ["filter", "exports", "print"],
url: 'json/data.json',
toolbar: "#tablebar1",
limit: 10,
limits: [5, 10, 15, 20],
page: true,
cols: [[
{type: 'checkbox', fixed: 'left'},
//field:对应json的数据字段，title:字段名，with:该字段的宽度，sort:开启排序，fixed：将列固定
{field: 'id', title: 'ID', width: '10%', sort: true, fixed: 'left'}
//edit:表格可编辑
, {field: 'username', title: '用户名', width: '10%', edit: true}
//templet的三种使用方法
, {
field: 'score', title: '评分', width: '10%', sort: true, templet: function (d) {
return d.experience >= '500' ? '高级' : '一般';
}
}
, {
field: 'experience',
title: '积分',
width: '10%',
sort: true,
templet: '<div><a href="#" class="layui-table-link">积分：{{d.experience}}</a></div>'
}
, {field: 'sex', title: '性别', width: '10%', sort: true, templet: '#titleTpl'}
//hide:将该列隐藏
, {field: 'wealth', title: '财富', width: 135, sort: true, hide: true}
, {field: 'city', title: '城市', width: '10%', hide: true}
, {field: 'sign', title: '签名', width: '10%', hide: true}
, {field: 'classify', title: '职业', width: '20%'}
//toolbar
, {fixed: 'right', title: '操作', width: 250, align: 'left', toolbar: '#tablebar2'}
]]
})
})
</script>
</body>
</html>
3153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
