程序代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-container">
<!-- 定义一个div 用于存放table组件-->
<div id="demo" lay-filter="test"></div>
</div>
<!-- 定义工具栏 例如 编辑 ，删除， 查看详情-->
<script type="text/html" id="barDemo">
<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详情</button>
</script>
<!-- 定义表头的工具栏 -->
<script type="text/html" id="tabBarDemo">
<div class="layui-btn-group">
<button class="layui-btn layui-btn-xs" lay-event="add">添加</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="import">导入</button>
<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="export"><i class="layui-icon layui-icon-export"></i>导出</button>
</div>
</script>
<!-- 定义弹出层的 内容 ,该div必须是body的儿子元素-->
<div id="myModel" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body layui-col-md8 layui-col-md-offset2">
<!-- 模态框的内容区域-->
<!--<form id="addForm" action="" class="layui-form" method="post">-->
<!--<!– id隐藏域–>-->
<!--<input type="hidden" name="id" value=""/>-->
<!--<div class="layui-form-item">-->
<!--<label class="layui-form-label">图书名：</label>-->
<!--<div class="layui-input-block">-->
<!--<input type="text" name="bookName" required lay-verify="required"-->
<!--placeholder="请输入图书" autocomplete="off" class="layui-input">-->
<!--</div>-->
<!--</div>-->
<!--<div class="layui-form-item">-->
<!--<label class="layui-form-label">作者：</label>-->
<!--<div class="layui-input-block">-->
<!--<input type="text" name="author" required lay-verify="required"-->
<!--placeholder="请输入作者" autocomplete="off" class="layui-input">-->
<!--</div>-->
<!--</div>-->
<!--<div class="layui-form-item">-->
<!--<label class="layui-form-label">价格：</label>-->
<!--<div class="layui-input-block">-->
<!--￥<input type="text" name="price" required lay-verify="required"-->
<!--placeholder="请输入价格" autocomplete="off" class="layui-input"> 元-->
<!--</div>-->
<!--</div>-->
<!--<!–<div class="layui-form-item">–>-->
<!--<!–<label class="layui-form-label">发布时间：</label>–>-->
<!--<!–<div class="layui-input-block">–>-->
<!--<!–<input type="text" id="publicDate" name="publicDate"–>-->
<!--<!–placeholder="请输入加入时间" class="layui-input">–>-->
<!--<!–</div>–>-->
<!--<!–</div>–>-->
<!--<div class="layui-form-item" style="text-align: center;">-->
<!--<button id="addBtn" class="layui-btn" type="button">提交</button>-->
<!--</div>-->
<!--</form>-->
<!--</div>-->
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="layui/layui.js"></script>
<script>
layui.use(['element','table','form'],function(){
var element = layui.element;
var table = layui.table;
var form = layui.form;
var layer = layui.layer;
// 加载表格
table.render({
elem:"#demo",
width:800,
// height:500,
// dataType:'JSONP', // 处理Ajax跨域问题
url:"js/demo1.json",
// url:"https://www.layui.com/demo/table/user/",
// url:"https://www.layui.com/demo/table/user/?page=2&limit=10", 这个链接不能被跨域访问 无法在我当前表格中显示数据
// url:"http://api.tianapi.com/txapi/wxhotarticle/index?key=acae02ebbec807d9e3bb8c503805fc62&num=10&page1",
page:true, //开启分页
cols:[[
{
field:"id", // 对应json的data的属性名
title:"ID", //列名
width:80,
sort:true, //是否排序
fixed:'left'// 列的固定位置
},
{
field:"username",
title:"用户名",
width:100,
} ,{
field: 'city',
title: '城市',
width:80}
,{
field: 'sign',
title: '签名',
width: 177}
,{
field: 'experience',
title: '积分',
width: 80,
sort: true}
,{
field: 'ip',
title: 'IP',
width: 120,
sort: true}
,{
field: 'joinTime',
title: '加入时间',
width: 150
}
,{
title:"操作",
width:200,
fixed: 'right', //固定在右边
align: 'center' , // 居中显示
toolbar:'#barDemo' // 将id=barDemo的文本作为工具栏显示
}
]]
,toolbar:'#tabBarDemo'
});
// 2、 对每一行的数据增加 按钮的监听事件
table.on('tool(test)',function(obj){
// 判断 当前点击的哪一个按钮
//获取每一行数据
var data = obj.data;
//获取每一行的event事件名
var event = obj.event;
if(event =='edit'){
layer.msg("编辑操作");
// 弹出模态框等
}else if(event =='del'){
layer.msg("删除操作，当前id:"+data.id); // 这里的id与field一致
}else if(event == 'detail'){
layer.msg('详情查看');
}
});
// 表头的工具栏
table.on('toolbar(test)',function(obj){
//获取选中的数据行
var checkStatus = table.checkStatus(obj.config.id);
var event=obj.event;
if(event =='add'){
//弹出一个 模态框 （弹出层组件）
//layer.msg('数据添加');
layer.open({
type:2, //弹出一个页面层
title:"用户添加",
// content:$("#myModel"), // 这是jquery的写法，需要导入
content:'05 表单元素.html',
area: ['500px', '300px'],
btn: ['按钮一', '按钮二', '按钮三'],
anim:1
})
}else if(event =='import'){
var data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
// 导入导出
})
})
</script>
</html>
运行结果
总结
与css不同，我们不需要过多的编辑，只需要引入layui模块，然后通过layui中封装的方法进行引用，就可以很轻松得到我们需要的效果。用layui插件做html，不仅更加简洁，而且效果也更好。
最后推荐一个学习layui的网址：
www.layui.com
通过该网址里面的文档和示例，对我们学习layui和使用时查找layui的一些方法提供便利。
3015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
