文档章节

layui框架部分功能介绍

君少0
 君少0
发布于 2017/09/07 09:07
字数 988
阅读 49
收藏 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
31.3K
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
0
bootstrap && layui 两种分页的实现

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

爱前端的小白
2017/09/09
0
0
基于 layui 的纯前端框架 - cy-ui

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

莆田陈冠希
06/05
0
0
后台管理框架 - jboot-admin

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

Rlax
01/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

精通Spring Boot——第十二篇:分页查询功能的实现

本文将介绍如何实现分页查询功能,推荐使用github的pagehelper插件实现(事实上大家基本都是这么干的),但本文的实现方式和大多数不同,废话少说,现在就带着大家看看区别在哪里。 先看pom...

developlee的潇洒人生
14分钟前
0
0
平淡的秋招之路

1. 概述 在八月中旬之前,我还没有秋招这个概念,认为找工作就是通过学校举办的招聘会。后来慢慢的了解到,由于学校实力的问题,许多好的公司只会去门当户对的学校进行招聘。我们学校只是一个...

firepation
17分钟前
0
0
设置布局中的子控件不可用

RelativeLayout R2 = findViewById(R.id.act_menu_level2_rl); //设置当前R2中的子控件不可用 int childCount = R2.getChildCount(); ......

lanyu96
28分钟前
1
0
分布式系统中处理参数配置的 4 种方案

一个系统中包含有各种各样的配置信息,如一个日志文件需要配置以下几个信息。 日志文件生成主目录 日志文件名称,不同的日志级别对应不同的文件 当前日志级别 还有其他各种业务参数、系统参数...

Java技术栈
29分钟前
1
0
MongoDB的使用学习之(七)MongoDB的聚合查询(两种方式)附项目源码

MongoDB的使用学习之(七)MongoDB的聚合查询(两种方式)附项目源码 先来张在路上…… 铛铛铛……项目源码下载地址:http://files.cnblogs.com/ontheroad_lee/MongoDBDemo.rar 此项目是用M...

Airship
35分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部