先上一张展示图:
效果还是很好看的,看下如何实现的吧
当然首先要做好准备工作,下载layui文件到自己的项目中去,下载地址https://www.layui.com/
最好之后,看例子吧
其中的数据源放在json格式的文件中,使用layui框架,返回的数据格式要按照他们定义的格式来,不然是获取不到数据的。
html代码:
<!DOCTYPE html>
<html>
<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>layui在线调试</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!--这里要改成自己的资源路径-->
<style>
body {
margin: 20px;
}
</style>
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<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>
</body>
<script src="layui/layui.js"></script>
<!--这里要改成自己的资源路径-->
<script>
layui.use('table', function() {
var table = layui.table; //表格
//向世界问个好
layer.msg('Hello World');
//执行一个 table 实例
table.render({
elem: '#demo',
height: 600,
url: 'new.json'