maven云笔记之添加笔记本和分页功能

8 篇文章 0 订阅
3 篇文章 0 订阅

我们的想法是这样的:
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("通信失败");
 			}	
 		});
     });
	});

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值