一、分页功能

layui框架分页使用，其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能。下面就看一下我对layui框架分页的介绍。

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

laypage的使用；

 <p id="demo1"></p>//界面容器  <ｓｃｒｉｐｔ src="//res.layui.com/layui/build/layui.js" charset="utf-8"></ｓｃｒｉｐｔ> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <ｓｃｒｉｐｔ> //加载layui layui.use([&#39;laypage&#39;, &#39;layer&#39;], function(){   var laypage = layui.laypage   ,layer = layui.layer;  laypage({         cont: &#39;demo1&#39;//界面容器ID         ,pages:data.number1 //总页数          ,groups: 5 //连续显示分页数         , jump: function(obj, first){      //得到了当前页，用于向服务端请求对应数据          var curr = obj.curr;         //向服务器发送请求通过当前页数去计算查询条数           }   }); }; </ｓｃｒｉｐｔ>

相关推荐：《layui框架教程》

二、layui时间日功能

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

 <label class="layui-form-label">时间</label>     <p  style="width: 100px" class="layui-input-inline">       <input  class="layui-input" placeholder="开始日" id="LAY_demorange_s">     </p>     <p style="width: 100px" class="layui-input-inline">       <input  class="layui-input" placeholder="截止日" id="LAY_demorange_e">     </p>     <!-- 没有写提交按钮 -->  <ｓｃｒｉｐｔ> //加载layui layui.use([&#39;laydate&#39;,&#39;paging&#39;, &#39;form&#39;], function() {     var $ = layui.jquery,             paging = layui.paging(),             layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象             layer = layui.layer, //获取当前窗口的layer对象             form = layui.form();        var start = {                 min:&#39;1900-01-01 00:00:00&#39;//设置最小日期                 ,max: &#39;2099-06-16 23:59:59&#39;//设置最大日期                 ,istoday: false                 ,choose: function(datas){                   end.min = datas; //开始日选好后，重置结束日的最小日期                   end.start = datas //将结束日的初始值设定为开始日                 }               };        var end = {                 min:&#39;1900-01-01 00:00:00&#39;//设置最小日期                 ,max: &#39;2099-06-16 23:59:59&#39;//设置最大日期                 ,istoday: false                 ,choose: function(datas){                   start.max = datas; //结束日选好后，重置开始日的最大日期                 }               };                //LAY_demorange_s日期容器ID       document.getElementById(&#39;LAY_demorange_s&#39;).onclick = function(){             start.elem = this;             laydate(start);//对两个日期进行关联           }           //LAY_demorange_e日期容器ID       document.getElementById(&#39;LAY_demorange_e&#39;).onclick = function(){         end.elem = this         laydate(end);//对两个日期进行关联       }  </ｓｃｒｉｐｔ>

三、弹出框功能

layer.open的使用；

 <ｓｃｒｉｐｔ src="//res.layui.com/layui/build/layui.js" charset="utf-8"></ｓｃｒｉｐｔ> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->  <ｓｃｒｉｐｔ> //加载layui layui.use(&#39;layer&#39;, function(){ //独立版的layer无需执行这一句   var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句     var addBoxIndex = -1;//记录是否弹出     //获取事件，点击事件#add按钮id     $(&#39;#add&#39;).on(&#39;click&#39;, function() {         if(addBoxIndex !== -1)             return;         //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取         //ShiJian-form.html弹出后显示的界面         $.get(&#39;ShiJian-form.html&#39;, null, function(form) {             addBoxIndex = layer.open({                 type: 1,                 title: &#39;添加事件&#39;,//弹出框标题                 content: form,                 btn: [&#39;保存&#39;, &#39;取消&#39;],                 shade: false,                 offset: [&#39;100px&#39;, &#39;30%&#39;],                 area: [&#39;700px&#39;, &#39;600px&#39;],                 zIndex: 19950924,                 maxmin: true,                 yes: function(index) {                 //确定按钮回调方法                  layer.close(index);//这块是点击确定关闭这个弹出层                   location.reload(); //刷新，对弹出前的页面进行刷新                  setTimeout(function(){                       top.layer.close(index);                       top.window[iframeName].frames.location.reload();                       }, 100);//延时0.1秒，对应360 7.1版本bug                 },                 full: function(elem) {                 //取消和关闭按钮触发的回调                     var win = window.top === window.self ? window : parent.window;                     $(win).on(&#39;resize&#39;, function() {                         var $this = $(this);                         elem.width($this.width()).height($this.height()).css({                             top: 0,                             left: 0                         });                         elem.children(&#39;p.layui-layer-content&#39;).height($this.height() - 95);                     });                 },                 success: function(layero, index) {                 //层弹出后的成功回调方法                  },                 end: function() {                 //层销毁后触发的回调                     addBoxIndex = -1;                 }             });         });     }); });  });  </ｓｃｒｉｐｔ>

标签： layui教程