22
11月
2021
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Playground</title>
<link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<blockquote class="layui-elem-quote layui-text" id="version">
当前版本: Layui-v{{= layui.v }}
</blockquote>
<table class="layui-hide" id="ID-test-table"></table>
<script type="text/html" id="ID-demo-table-tool">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
<div class="layui-tab layui-tab-brief" lay-filter="filter-test-tab">
<ul class="layui-tab-title">
<li class="layui-this">演示说明</li>
<li>日期</li>
<li>分页</li>
<li>上传</li>
<li>滑块</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-carousel" id="ID-test-carousel">
<style>.demo-carousel{height: 200px; line-height: 200px; text-align: center;}</style>
<div carousel-item>
<div><p class="demo-carousel">在这里，您将以最直观的形式体验 Layui</p></div>
<div><p class="layui-bg-red demo-carousel">在编辑器中输入 Layui 相关的代码</p></div>
<div><p class="layui-bg-green demo-carousel">也可以结合 Layui 官方文档来此处进行示例演示</p></div>
</div>
</div>
</div>
<div class="layui-tab-item">
<div id="ID-test-laydate"></div>
</div>
<div class="layui-tab-item">
<div id="ID-test-laypage"></div>
</div>
<div class="layui-tab-item">
<div class="layui-upload-drag" id="ID-test-upload">
<i class="layui-icon"></i>
<p>点击上传，或将文件拖拽到此处</p>
<div class="layui-hide" id="ID-test-upload-view">
<hr>
<img src="" alt="上传成功后渲染" style="max-width: 100%">
</div>
</div>
</div>
<div class="layui-tab-item">
<div id="ID-test-slider" style="margin: 52px 18px;"></div>
</div>
</div>
</div>
<script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
<script>
layui.use(function() {
// 获得需要的内置组件
var layer = layui.layer; // 弹层
var laypage = layui.laypage; // 分页
var laydate = layui.laydate; // 日期
var table = layui.table; // 表格
var carousel = layui.carousel; // 轮播
var upload = layui.upload; // 上传
var element = layui.element; // 元素操作
var slider = layui.slider; // 滑块
var dropdown = layui.dropdown; // 下拉菜单
// 向世界问个好
layer.msg('Hello World');
// Tab 切换
element.on('tab(filter-test-tab)', function(data) {
layer.tips('切换了 '+ data.index +' : '+ this.innerHTML, this, {
tips: 1
});
});
// 执行一个 table 实例
table.render({
elem: '#ID-test-table',
height: 420,
url: '/static/json/2/table/user.json', // 数据接口（此处为静态数据，仅作演示）
title: '用户表',
page: true, // 开启分页
toolbar: 'default', // 开启工具栏，此处显示默认图标，可以自定义模板，详见文档
totalRow: true, // 开启合计行
cols: [[ // 表头
{type: 'checkbox', fixed: 'left'},
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRow: '合计 : '},
{field: 'username', title: '用户名', width:80},
{field: 'experience', title: '积分', width: 90, sort: true, totalRow: '{{= d.TOTAL_NUMS }}'},
{field: 'sex', title: '性别', width:80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true, totalRow: true},
{field: 'city', title: '城市', width:150},
{field: 'sign', title: '签名', minWidth: 200},
{field: 'classify', title: '职业', width: 100},
{field: 'words', title: '字数', width: 135, sort: true, totalRow: true},
{fixed: 'right', title: '操作', width: 150, align:'center', toolbar: '#ID-demo-table-tool'}
]]
});
// 头工具栏事件
table.on('toolbar(ID-test-table)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id);
var data = checkStatus.data; // 获取选中的数据
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'update':
if (data.length === 0) {
layer.msg('请选择一行');
} else if(data.length > 1) {
layer.msg('只能同时编辑一个');
} else {
layer.alert('编辑 [id] : '+ checkStatus.data[0].id);
}
break;
case 'delete':
if (data.length === 0) {
layer.msg('请选择一行');
} else {
layer.msg('删除');
}
break;
};
});
// 单元格工具事件
table.on('tool(ID-test-table)', function(obj) {
var data = obj.data; // 获得当前行数据
var layEvent = obj.event; // 获得 lay-event 对应的值
if (layEvent === 'detail') {
layer.msg('查看操作');
} else if(layEvent === 'more') {
// 下拉菜单
dropdown.render({
elem: this, // 触发事件的 DOM 对象
show: true, // 外部事件触发即显示
data: [{
title: '编辑',
id: 'edit'
}, {
title: '删除',
id: 'del'
}],
click: function(menudata){
if (menudata.id === 'del') {
layer.confirm('真的删除行么', function(index) {
obj.del(); // 删除对应行（tr）的DOM结构
layer.close(index);
// 向服务端发送删除指令
});
} else if(menudata.id === 'edit') {
layer.msg('编辑操作，当前行 ID:'+ data.id);
}
},
align: 'right', // 右对齐弹出
style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' // 设置额外样式
})
}
});
// 执行一个轮播实例
carousel.render({
elem: '#ID-test-carousel',
width: '100%', // 设置容器宽度
height: 200,
arrow: 'none', // 不显示箭头
anim: 'fade' // 切换动画方式
});
// 将日期直接嵌套在指定容器中
var dateIns = laydate.render({
elem: '#ID-test-laydate',
position: 'static',
calendar: true, // 是否开启公历重要节日
mark: { // 标记重要日子
'0-10-14': '生日',
'2016-10-14': '首版',
'2017-08-21': '2.0',
'2100-01-01': '新纪'
},
done: function(value, date, endDate) {
if(date.date == 1){
dateIns.hint('这个月的第一天');
}
},
change: function(value, date, endDate) {
layer.msg(value)
}
});
// 分页
laypage.render({
elem: 'ID-test-laypage', // 分页容器的id
count: 1000, // 数据总数
limit: 10, // 每页显示的数据条数
skin: '#1E9FFF', // 自定义选中色值
// layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'], // 自定义排版
jump: function(obj, first) {
if (!first) {
layer.msg('第'+ obj.curr +'页', {offset: 'b'});
}
}
});
// 上传
upload.render({
elem: '#ID-test-upload',
url: '', // 若需模拟上传过程，而不真实上传文件，可使用开源的 HTTP 模拟接口: https://httpbin.org/post
done: function(res) {
layer.msg('上传成功');
layui.$('#ID-test-upload-view').removeClass('layui-hide').find('img').attr('src', res.files.file);
console.log(res)
},
before: function() {
layer.msg('上传中', {icon: 16, time: 0});
}
});
// 滑块
slider.render({
elem: '#ID-test-slider',
input: true // 输入框
});
// 显示 Layui 版本
var versionTPL = lay('#version')[0].innerHTML;
lay('#version').html(layui.laytpl(versionTPL).render({}))
});
</script>
</body>
</html>