文档章节

layui框架部分功能介绍

君少0
 君少0
发布于 2017/09/07 09:07
字数 988
阅读 45
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

又一个centos文件顺序导致的问题

背景 新的centos似乎对于文件顺序做了特别的优化 和文件顺序出现的问题确实多了不少 centos7导致的spring循环依赖【实际上和这个问题不一样 不过由此衍生出的问题】 某应用放在新的系统开始报...

Mr_Qi
17分钟前
0
0
阿里云国际版香港CN2测评 月付9美元/30M带宽/1T流量

市面上很多家香港VPS服务商,一直都说阿里云国际版香港CN2线路好,延迟低,速度快,价格便宜流量还多,那么这个香港线路到底怎么样呢?本文从性能、延时、路由、速度方面来全方面测评一下阿里...

flyzy2005
今天
0
0
撤销git commit --amend

it commit -amend之后想撤销 git reset HEAD@{1}

xiaomge
今天
0
0
有意思的TimeUnit

java.util.concurrent.TimeUnit 这个类,相信童鞋们都不陌生。它是一个enum: public enum TimeUnit 好吧,我一直把它当做一个枚举类来用。偶然看到还有别的用法,大吃一斤,原来 TimeUnit 并...

polly
今天
10
0
生成pyc

Python生成pyc文件 pyc文件是py文件编译后生成的字节码文件(byte code)。pyc文件经过python解释器最终会生成机器码运行。所以pyc文件是可以跨平台部署的,类似Java的.class文件。一般py文件改...

Mr_Tea伯奕
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部