文档章节

layui框架部分功能介绍

君少0
 君少0
发布于 2017/09/07 09:07
字数 988
阅读 63
收藏 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
成都
私信 提问
加载中

评论(0)

OA 平台--JFinalOA

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

丶Lion
2017/02/17
7.7W
49
温山/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
整合X-Admin前端框架改造ABP

  “站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次。在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自...

osc_2koyq9mo
2019/02/21
11
0
layui 导出 excel 表格

前言 最近这个项目中,涉及到了导出excel表格这个功能,这个后台管理使用的是layui这个框架,大体来说还是很方便,节省了很多的开发时间。 看layui的官网社区论坛,很多人都说layui自带的导出...

osc_rxp5t2vl
2019/04/19
6
0
SharePoint Online 创建我的审批列表

  前言   我们创建了很多需要审批的单子,但是,从哪里看到这些单子呢?这篇文章就为大家介绍,该如何去做。   正文   1.创建一个web部件页,随便选一个模板,如下图:   为什么随...

霖雨
03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

二、netcore跨平台之 Linux部署nginx代理webapi

原文: 二、netcore跨平台之 Linux部署nginx代理webapi 上一章,我们讲了在linux上安装netcore环境,以及让netcore在linux上运行。 这一章我们开始讲在linux上配置nginx,以及让nginx反向代理...

osc_jo2m8l1r
5分钟前
10
0
CAD怎么转PDF文件?使用这款编辑器一键转换、批量转换

CAD怎么转换成PDF文件呢?小伙伴们不妨使用这款CAD编辑器,把CAD文件一键、批量转换成PDF文件哦。 有许多小伙伴应该都知道,为了满足各种学习、工作的需求,文件之间是经常需要相互转换格式的...

真不莲
5分钟前
19
0
详解Microsoft.AspNetCore.CookiePolicy

原文: 详解Microsoft.AspNetCore.CookiePolicy 详解Asp.Net Core中的Cookie策略 目录 详解Asp.Net Core中的Cookie策略 功能介绍 使用Cookie策略 从UseCookiePolicy方法入手 实现IResponseCo...

osc_0vd38ylb
7分钟前
7
0
怎么找到自己收藏过的思维导图模板?迅捷画图教你详细步骤!

怎么找到自己收藏过的思维导图模板?大家在刷视频的时候,遇到自己喜欢的视频,都会点个微信或者关注,用电脑看网页的时候,遇到有意思的网站,也会点击添加书签进行收藏,方便以后阅读或者是...

赛利亚大姐大
8分钟前
6
0
Microsoft.AspNetCore.Authentication.Cookies从入门到精通 (一)

原文: Microsoft.AspNetCore.Authentication.Cookies从入门到精通 (一) Microsoft.AspNetCore.Authentication.Cookies从入门到精通 (一) 目录 Microsoft.AspNetCore.Authentication.Cook......

osc_t5nbj8ds
8分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部