Quelles sont les principales fonctions de layui ?

1. Fonction de pagination

La pagination du framework Layui est utilisée. il suffit de transmettre un total Le nombre de pages peut faire bon usage de cette fonction. Jetons un coup d'œil à mon introduction à la pagination du framework layui.

Remarque : le nombre de pages transmises n'est pas le nombre de requêtes de base de données

Utilisation de laypage

 <div id="demo1"></div>//界面容器
 
 <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
 <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
 <script>
 //加载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;
         //向服务器发送请求通过当前页数去计算查询条数     
 
     }
   });
 };
 </script>

Recommandations associées : "Tutoriel du framework layui 》

2. Fonction heure et jour Layui

Le code suivant est une fonction de date de début et de fin

 <label class="layui-form-label">时间</label>
     <div  style="width: 100px" class="layui-input-inline">
       <input  class="layui-input" placeholder="开始日" id="LAY_demorange_s">
     </div>
     <div style="width: 100px" class="layui-input-inline">
       <input  class="layui-input" placeholder="截止日" id="LAY_demorange_e">
     </div>
     <!-- 没有写提交按钮 -->
 
 <script>
 //加载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);//对两个日期进行关联
       }
 
 </script>

3. -fonction up box

Utilisation de layer.open;

 <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
 <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
 
 <script>
 //加载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;div.layui-layer-content&#39;).height($this.height() - 95);
                     });
                 },
                 success: function(layero, index) {
                 //层弹出后的成功回调方法
 
                 },
                 end: function() {
                 //层销毁后触发的回调
                     addBoxIndex = -1;
                 }
             });
         });
     });
 });
 
 });
 
 </script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!