mirror of
https://github.com/layui/layui.git
synced 2026-02-09 02:09:18 +08:00
157 lines
4.3 KiB
HTML
157 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
|
/>
|
|
<title>表格边框测试</title>
|
|
<link rel="stylesheet" href="./assets/dist/css/layui.css" />
|
|
<style>
|
|
body {
|
|
padding: 32px; /*overflow-y: scroll;*/
|
|
}
|
|
|
|
.layui-table-view {
|
|
margin: 8px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<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>
|
|
|
|
<blockquote class="layui-elem-quote">无统计、无分页</blockquote>
|
|
|
|
<table id="test"></table>
|
|
|
|
<blockquote class="layui-elem-quote">有统计、无分页</blockquote>
|
|
|
|
<table id="test1"></table>
|
|
|
|
<blockquote class="layui-elem-quote">无统计、有分页</blockquote>
|
|
|
|
<table id="test2"></table>
|
|
|
|
<blockquote class="layui-elem-quote">有统计、有分页</blockquote>
|
|
|
|
<table id="test3"></table>
|
|
|
|
<script
|
|
src="./assets/dist/layui.js"
|
|
src1="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.js"
|
|
></script>
|
|
<script>
|
|
layui.use(['table', 'laydate'], () => {
|
|
var $ = layui.$;
|
|
var table = layui.table;
|
|
|
|
var url = './assets/json/table/demo1.json';
|
|
|
|
// 无统计、无分页
|
|
table.render({
|
|
elem: '#test',
|
|
url: url,
|
|
// , totalRow: true
|
|
height: 300,
|
|
cellMinWidth: 80,
|
|
//,skin: 'line'
|
|
//,size: 'lg'
|
|
// , toolbar: true
|
|
cols: [
|
|
[
|
|
{ field: 'id', hide: true },
|
|
{ field: 'username', title: '用户名' },
|
|
{ field: 'email', title: '邮箱' },
|
|
{ title: '操作', align: 'center', toolbar: '#barDemo' },
|
|
],
|
|
],
|
|
});
|
|
|
|
// 有统计、无分页
|
|
table.render({
|
|
elem: '#test1',
|
|
url: url,
|
|
totalRow: true,
|
|
height: 300,
|
|
cellMinWidth: 80,
|
|
//,skin: 'line'
|
|
//,size: 'lg'
|
|
// , toolbar: true
|
|
cols: [
|
|
[
|
|
{ field: 'id', hide: true },
|
|
{ field: 'username', title: '用户名' },
|
|
{ field: 'email', title: '邮箱' },
|
|
{ title: '操作', align: 'center', toolbar: '#barDemo' },
|
|
],
|
|
],
|
|
});
|
|
|
|
// 无统计、有分页
|
|
table.render({
|
|
elem: '#test2',
|
|
url: url,
|
|
//,contentType: 'application/json' // 参数为 json 格式传递
|
|
page: {
|
|
// 详细参数可参考 laypage 组件文档
|
|
curr: 5,
|
|
groups: 1,
|
|
first: false,
|
|
last: false,
|
|
layout: ['limit', 'prev', 'page', 'next', 'count'], //自定义分页布局
|
|
},
|
|
// , totalRow: true
|
|
height: 300,
|
|
cellMinWidth: 80,
|
|
//,skin: 'line'
|
|
//,size: 'lg'
|
|
// , toolbar: true
|
|
cols: [
|
|
[
|
|
{ field: 'id', hide: true },
|
|
{ field: 'username', title: '用户名' },
|
|
{ field: 'email', title: '邮箱' },
|
|
{ title: '操作', align: 'center', toolbar: '#barDemo' },
|
|
],
|
|
],
|
|
});
|
|
|
|
// 有统计、有分页
|
|
table.render({
|
|
elem: '#test3',
|
|
url: url,
|
|
//,contentType: 'application/json' // 参数为 json 格式传递
|
|
page: {
|
|
// 详细参数可参考 laypage 组件文档
|
|
curr: 5,
|
|
groups: 1,
|
|
first: false,
|
|
last: false,
|
|
layout: ['limit', 'prev', 'page', 'next', 'count'], //自定义分页布局
|
|
},
|
|
totalRow: true,
|
|
height: 300,
|
|
cellMinWidth: 80,
|
|
//,skin: 'line'
|
|
//,size: 'lg'
|
|
// , toolbar: true
|
|
cols: [
|
|
[
|
|
{ field: 'id', hide: true },
|
|
{ field: 'username', title: '用户名' },
|
|
{ field: 'email', title: '邮箱' },
|
|
{ title: '操作', align: 'center', toolbar: '#barDemo' },
|
|
],
|
|
],
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|