我们的想法是这样的：
1. 分页功能
2. 查找笔记本
3. 添加笔记本
4. 修改笔记本
5. 删除笔记本
6. 每一个笔记本可以添加笔记
7. 每一个笔记本可以更新笔记
8. 每一个笔记本可以删除笔记
9. 每一个笔记本可以查找笔记
===========================================================================================================
OK，那我们开始一步一步做，首先得有一个页面，不用担心，我们采用了经典模块化前端UI框架–layui，解决了前端页面烦扰
layui网址：https://www.layui.com/进入网站后
一、首先下载layui包
二、解压后，引用到本项目中
三、新建一个页面，把后台布局引入
四、把js,css的路径修改正确
五、引入数据表格
六、运行
============================================= 分页功能=====================================================
如有疑惑，可查看API文档
layui.use(['table','jquery','layer'], function(){
var table = layui.table
,layer = layui.layer
,$ = layui.jquery
//分页
//其中data：直接赋值数据。既适用于只展示一页数据，也非常适用于对一段已知数据进行多页展示。
table.render({
elem: '#test' //指定原始 table 容器的选择器或 DOM，方法渲染方式必填
,url:'notebook/getnotebook.do' //异步数据接口相关参数。其中 url 参数为必填项
,parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.state == 1?0:-1, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.data.count, //解析数据长度，就是每页几条
"data": res.data.list //解析数据列表
};
}
,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
title: '笔记本表'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:50}
,{field:'name', title:'笔记本名称',edit: 'text'}
,{field:'addtime', title:'加入时间', width:200,templet:'<div>{{layui.util.toDateString(d.addtime)}}</div>'}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
,page: true
});
});
<div>{{layui.util.toDateString(d.addtime)}}</div> //这个就是表示把时间戳转变成日期格式
============================================= 添加笔记本=====================================================
要求：点击“添加笔记本”按钮，弹出居中对话框，填写完毕后，数据可以在表中同步更新。
1.准备弹出层HTML5页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<title>Insert title here</title>
</head>
<body>
<div class="layui-form-item" style="margin-top:20px">
<label class="layui-form-label">id</label>
<div class="layui-input-block">
<input type="text" id = "id" name="id"autocomplete="off" placeholder="请输入id" class="layui-input" style="width:80%">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">笔记本名称</label>
<div class="layui-input-block">
<input type="text" id ="name" name="name"autocomplete="off" placeholder="请输入标题" class="layui-input" style="width:80%">
</div>
</div>
<button id ="submit" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" style="margin-left:112px">立即提交 </button>
<button id ="reset" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal" style="margin-left:112px">立即重置</button>
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/addNoteBook.js"></script>
</body>
</html>
2.给按钮添加点击事件
如有不懂，可查询layui文档
layui.use(['table','jquery','layer'], function(){
var table = layui.table
,layer = layui.layer
,$ = layui.jquery
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'addNoteBook':
layer.open({
type: 2,//弹出框类型
area: ['500px', '300px'],//弹出框大小
content: 'add_notebook.html', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
cancel: function(index, layero){
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
}
}); //只重载数据
layer.close(index)
return false;
}
});
break;
//自定义头工具栏右侧图标 - 提示
case 'LAYTABLE_TIPS':
layer.alert('这是工具栏右侧自定义的一个图标按钮');
break;
};
});
});
3.弹出层JavaScript
虽然弹出层出来了，但是填写的内容必须传送到数据库并保存，才可以。所以，新建一个名为addNoteBook.js的JavaScript文件
layui.use(['jquery','layer'], function(){
var layer = layui.layer
,$ = layui.jquery
$("#submit").on("click",function(){
//首先判断id号或者笔记本名称是否为空
if($('#name').val() =="" || $('#id').val() == "")
{
layer.msg("id号或者笔记本名称不能为空");
return;
}
//然后在传数据
var sendData={"id":$('#id').val(),"name":$('#name').val()};
$.ajax({
type:"get",
url:"notebook/addnotebook.do",//路径不要写错
data:sendData,
datatype:"json",
success:function(msg){
if(msg.state == 1)
{
//添加成功
layer.msg(msg.message);
}else
{
//添加失败
layer.msg(msg.message);
}
},
error:function(msg){
alert("通信失败");
}
});
});
});
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
