文档章节

layui框架部分功能介绍

君少0
 君少0
发布于 2017/09/07 09:07
字数 988
阅读 53
收藏 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
基于 layui 的纯前端框架 - cy-ui

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

莆田陈冠希
06/05
0
0
bootstrap && layui 两种分页的实现

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

爱前端的小白
2017/09/09
0
0
Rlax/jboot-admin

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

Rlax
01/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud 分布式链路跟踪 Sleuth + Zipkin + Elasticsearch

随着业务越来越复杂,系统也随之进行各种拆分,特别是随着微服务架构的兴起,看似一个简单的应用,后台可能很多服务在支撑;一个请求可能需要多个服务的调用;当请求迟缓或不可用时,无法得知...

编程SHA
5分钟前
1
0
Swift-清除缓存

func removeCache (){ // 取出cache文件夹路径.如果清除其他位子的可以将cachesDirectory换成对应的文件夹 let cachePath = NSSearchPathForDirectoriesInDomains(FileMan...

west_zll
5分钟前
1
0
kl键盘事件

frameworks/base/data/keyboards路径下定义了很对kl文件。如Vendor_0416_Product_0300.kl,定义了某某遥控器的按键事件 # TVkey 103 DPAD_UPkey 108 DPAD_DOWNkey 105 DPAD_LEFTk...

安卓工程师王恒
8分钟前
1
0
CentOS 7 安装 Docker

工具: Oracle VM VirtualBox 虚拟机 ,本地电脑win10 系统: 虚拟机装 centos 7 前置条件: Docker 要求 CentOS 系统的内核版本高于 3.10 1. 通过 uname -r 命令查看当前的内核版本 2. 如果不够...

_大侠__
19分钟前
1
0
webrtc onAddStream回调流程

背景 webrtc代码基于M59 正文 1. 回调设置和处理 (1)java层先在监听器中实现回调处理函数,如下所示: private class PCObserver implements PeerConnection.Observer { @Override...

bill_shen
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部