文档章节

layui框架部分功能介绍

君少0
 君少0
发布于 2017/09/07 09:07
字数 988
阅读 40
收藏 0
点赞 1
评论 0

注意;代码的所有功能都没有导入layui的css样式

一,分页功能

layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能

下面就看一下我对layui框架分页的介绍,

注意:传入的是页数不是数据库查询的条数

laypage的使用;
 1 <div id="demo1"></div>//界面容器
 2         
 3 <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
 4 <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
 5 <script>
 6 //加载layui
 7 layui.use(['laypage', 'layer'], function(){
 8   var laypage = layui.laypage
 9   ,layer = layui.layer;
10   
11 laypage({
12         cont: 'demo1'//界面容器ID
13         ,pages:data.number1 //总页数
14          ,groups: 5 //连续显示分页数
15         , jump: function(obj, first){
16      //得到了当前页,用于向服务端请求对应数据
17          var curr = obj.curr;
18         //向服务器发送请求通过当前页数去计算查询条数     
19                     
20     }
21   }); 
22 }; 
23 </script>

二,layui时间日功能

  下面的代码的是一个开始结束日期功能

 1 <label class="layui-form-label">时间</label>
 2     <div  style="width: 100px" class="layui-input-inline">
 3       <input  class="layui-input" placeholder="开始日" id="LAY_demorange_s">
 4     </div>
 5     <div style="width: 100px" class="layui-input-inline">
 6       <input  class="layui-input" placeholder="截止日" id="LAY_demorange_e">
 7     </div>
 8     <!-- 没有写提交按钮 -->
 9 
10 <script>  
11 //加载layui
12 layui.use(['laydate','paging', 'form'], function() {
13     var $ = layui.jquery,
14             paging = layui.paging(),
15             layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
16             layer = layui.layer, //获取当前窗口的layer对象
17             form = layui.form();
18             
19     
20       var start = {
21                 min:'1900-01-01 00:00:00'//设置最小日期
22                 ,max: '2099-06-16 23:59:59'//设置最大日期
23                 ,istoday: false
24                 ,choose: function(datas){
25                   end.min = datas; //开始日选好后,重置结束日的最小日期
26                   end.start = datas //将结束日的初始值设定为开始日
27                 }
28               };
29               
30       var end = {
31                 min:'1900-01-01 00:00:00'//设置最小日期
32                 ,max: '2099-06-16 23:59:59'//设置最大日期
33                 ,istoday: false
34                 ,choose: function(datas){
35                   start.max = datas; //结束日选好后,重置开始日的最大日期
36                 }
37               };
38               
39               //LAY_demorange_s日期容器ID
40       document.getElementById('LAY_demorange_s').onclick = function(){
41             start.elem = this;
42             laydate(start);//对两个日期进行关联
43           }
44           //LAY_demorange_e日期容器ID
45       document.getElementById('LAY_demorange_e').onclick = function(){
46         end.elem = this
47         laydate(end);//对两个日期进行关联
48       }
49 
50 
51 </script>

三,弹出框功能

  本以为面只有详细介绍没有实现具体功能

  layer.open的使用;

 1 <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
 2 <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
 3 
 4 <script>
 5 //加载layui
 6 layui.use('layer', function(){ //独立版的layer无需执行这一句
 7   var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
 8     var addBoxIndex = -1;//记录是否弹出
 9     //获取事件,点击事件#add按钮id
10     $('#add').on('click', function() {
11         if(addBoxIndex !== -1)
12             return;
13         //本表单通过ajax加载 --以模板的形式,当然你也可以直接写在页面上读取
14         //ShiJian-form.html弹出后显示的界面
15         $.get('ShiJian-form.html', null, function(form) {
16             addBoxIndex = layer.open({
17                 type: 1,
18                 title: '添加事件',//弹出框标题
19                 content: form,
20                 btn: ['保存', '取消'],
21                 shade: false,
22                 offset: ['100px', '30%'],
23                 area: ['700px', '600px'],
24                 zIndex: 19950924,
25                 maxmin: true,
26                 yes: function(index) {
27                 //确定按钮回调方法
28                  layer.close(index);//这块是点击确定关闭这个弹出层
29                  
30                  location.reload(); //刷新,对弹出前的页面进行刷新
31                  setTimeout(function(){  
32                       top.layer.close(index);  
33                       top.window[iframeName].frames.location.reload();  
34                       }, 100);//延时0.1秒,对应360 7.1版本bug  
35                 },
36                 full: function(elem) {
37                 //取消和关闭按钮触发的回调
38                     var win = window.top === window.self ? window : parent.window;
39                     $(win).on('resize', function() {
40                         var $this = $(this);
41                         elem.width($this.width()).height($this.height()).css({
42                             top: 0,
43                             left: 0
44                         });
45                         elem.children('div.layui-layer-content').height($this.height() - 95);
46                     });
47                 },
48                 success: function(layero, index) {
49                 //层弹出后的成功回调方法
50 
51                 },
52                 end: function() {
53                 //层销毁后触发的回调
54                     addBoxIndex = -1;
55                 }
56             });
57         });
58     });
59 });
60 
61 });
62 
63 
64 </script>

 

© 著作权归作者所有

共有 人打赏支持
君少0
粉丝 0
博文 1
码字总数 988
作品 0
成都
OA 平台--JFinalOA

重大更新:由于各种原因LayUI版本的JFinalOA并没有及时更新,之前的代码全部迁移到JFinalOA-LayUI项目中去。 LayUI版本未来一段时间将不进行维护,需要使用的朋友可以对其随意修改使用。 JF...

丶Lion ⋅ 2017/02/17 ⋅ 39

温山/layui-treetable

最新版本是基于layui v2.2.3, 附件中有layui v1.0.7 demo.htmldemo2.html是treetable,demo3.html是带checkbox的tree #layui-treeGird 首先介绍一下layui,是一个模块化前端UI框架,遵循原生...

温山 ⋅ 2017/12/02 ⋅ 0

基于 layui 的纯前端框架 - cy-ui

cy-ui 基于layui的纯前端框架 框架说明 1.基于原生layui源码,替换layui文件即可完成升级! 2.前端声明式组件封装、附带文档编写 ctrl+c ctrl+v 即可使用。封装数据源,可通过url、枚举、字典...

莆田陈冠希 ⋅ 06/05 ⋅ 0

bootstrap && layui 两种分页的实现

最近做的项目中后台界面用的layui框架,前台界面用的是boostrap框架,这就导致我在做分页的过程中要考虑前台两种分页的动态实现,现在我已经爬出这个坑了,哈哈,给大家分享一下,写的不好的...

爱前端的小白 ⋅ 2017/09/09 ⋅ 0

Rlax/jboot-admin

项目介绍   jboot-admin为使用强大的微服务框架jboot开发的后台管理系统,完全按照微服务思路设计开发,可用作后台系统项目脚手架,涵盖了jboot提供的大部分功能,包含代码生成、认证权限、...

Rlax ⋅ 01/11 ⋅ 0

后台管理框架 - jboot-admin

项目介绍 jboot-admin是基于强大的微服务框架jboot开发的后台管理框架,采用微服务架构设计思想,分为api层、服务实体层、服务调用层、服务实现层、服务基础层,涵盖了jboot提供的大部分功能...

Rlax ⋅ 01/15 ⋅ 0

【软件周刊】Google Chrome 55 发布,默认禁用 Flash;PHP 7.1.0 发布,提供新的语法

图自:techgirl PHP 7.1.0 正式发布,大量的改进和新功能 可空类型 返回空类型 可迭代的psuedo-type 支持常量可见的类 数组解构 square 框架和在 list()中允许指定 keys 多异常类型捕获 Goog...

局长 ⋅ 2016/12/03 ⋅ 16

基于 SpringBoot 的快速开发框架 - cy-fast

框架说明 基于springboot+shiro+freemarker的快速开发框架,代码结构清晰,快速上手使用! 配置代码生成器,减少70%开发时间,专注业务逻辑。 前端声明式组件封装、附带文档编写 ctrl+c ctrl+...

陈熠 ⋅ 01/06 ⋅ 1

基于 ssm+shiro 的后台管理框架 - cy-security

cy-security 是基于 ssm+shiro 安全框架的后台管理框架。 具有以下特点 基于ssm+shiro安全框架的后台管理框架,权限简单易用可控制到按钮。 配置代码生成器,减少70%开发时间,专注业务逻辑。...

228112142 ⋅ 2017/12/18 ⋅ 0

荔枝后台管理系统 - lychee

lychee 后台管理系统基于 Layui 1.0.9 实现,lychee 取 Layui 中的 ly,恰好荔枝(lychee)含 ly 开头,那就叫 lychee 后台管理系统模板咯。 lychee 后端使用 Jboot+Beetl+MySQL ,前端 Layu...

IT小香猪 ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周三乱弹 —— 这样的女人私生活太混乱了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 胖达panda :你经历过体验到人生的大起大落吗?我一朋友在10秒内体验了,哈哈。@小小编辑 请点一首《almost lover》送给他。 《almost love...

小小编辑 ⋅ 38分钟前 ⋅ 5

自己动手写一个单链表

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、概述 单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对...

公众号_好好学java ⋅ 43分钟前 ⋅ 0

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部