mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.7 KiB
148 lines
3.7 KiB
<!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="../src/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="../src/layui.js" src1="https://cdn.staticfile.net/layui/2.7.6/layui.js"></script> |
|
<script> |
|
layui.use(['table', 'laydate'], function () { |
|
var $ = layui.$; |
|
var table = layui.table; |
|
|
|
var url = '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>
|
|
|