update

2021-04-22 10:22:45 +08:00
parent 0a433bf2e4
commit 726cdd9ba5
20 changed files with 637 additions and 111 deletions
--- a/examples/all.html
+++ b/examples/all.html
@@ -28,8 +28,14 @@ resize: none;">


 <div id="demo1"></div>
-<button class="layui-btn demo" test-active="test-form">测试弹出式 Form</button>
-<button class="layui-btn demo" test-active="test-use">测试是否重复加载内置组件</button>
+
+<div class="layui-btn-container">
+  <button class="layui-btn demo" test-active="test-form">测试弹出式 Form</button>
+  <button class="layui-btn demo" test-active="test-use">测试是否重复加载内置组件</button>
+</div>
+<div class="layui-inline">
+  <input class="layui-input" id="date1" placeholder="日期">
+</div>

 <div class="layui-tab" lay-filter="tabDemo">
  <ul class="layui-tab-title">
@@ -72,9 +78,37 @@ layui.use(function(){
  ,laypage = layui.laypage
  ,element = layui.element
  ,transfer = layui.transfer
-  ,util = layui.util;
+  ,util = layui.util
+  ,laydate = layui.laydate;
  
  layer.msg('hello');
+  layer.closeAll();
+  
+  //自动测试
+  (function(run){
+    if(!run) return;
+
+    var timer = setInterval(function(){
+      location.reload();
+    }, 1000);
+    
+    $.ajax({
+      url: './all.html'
+      ,beforeSend: function(){
+        layer.load();
+      }
+      ,success: function(){
+        layer.closeAll('loading', function(){
+          setTimeout(function(){
+            if($('.layui-layer-loading').length){
+              console.error('layer close 异常');
+              clearInterval(timer);
+            }
+          }, 200);
+        });
+      }
+    });
+  })(0);
  
  laypage.render({
    elem: 'demo1'
@@ -83,6 +117,10 @@ layui.use(function(){
  
  console.log(lay('#footer').html());
  
+  laydate.render({
+    elem: '#date1'
+  })
+  
  //测试加载非内置模块
  /*
  layui.config({
--- a/examples/form.html
+++ b/examples/form.html
@@ -12,12 +12,32 @@

  <link rel="stylesheet" href="../src/css/layui.css">

-<style>
-body{padding: 10px;}
-</style>
+  <style>
+  body{padding: 10px;}
+  </style>
 </head>
 <body>

+
+<form class="layui-form" method="get">
+  <div class="layui-form-item">
+    <div class="layui-input-inline">
+      <input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
+    </div>
+    <div class="layui-input-inline">
+      <input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
+    </div>
+    <div class="layui-input-inline">
+      <input type="text" name="arr[title]" required placeholder="请输入" autocomplete="off" class="layui-input">
+    </div>
+  </div>
+  <div class="layui-form-item">
+    <button class="layui-btn" lay-submit lay-filter="top">立即提交</button>
+  </div>
+</form>
+
+<hr>
+
 <form class="layui-form layui-form-pane1" action="" lay-filter="first">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
@@ -64,7 +84,7 @@ body{padding: 10px;}
    <div class="layui-inline">
      <label class="layui-form-label">行内表单</label>
      <div class="layui-input-block">
-        <select name="quiz" lay-verify="required" lay-verType="tips">
+        <select name="quiz" lay-verify="required" lay-verType="tips"  lay-filter="quiz111">
          <option value="">请选择问题</option>
          <option value="0">你工作的第一个城市</option>
          <option value="1" disabled>你的工号</option>
@@ -214,6 +234,14 @@ layui.use(['form', 'layedit', 'laydate'], function(){
    ]
  });
  
+  form.on('submit(top)', function(data){
+    console.log(data);
+    return false;
+  });
+  
+  
+  
+  
  //日期
  laydate.render({
    elem: '#date'
@@ -225,7 +253,7 @@ layui.use(['form', 'layedit', 'laydate'], function(){
    ,'phone': 11111111111
    ,'email': 'xu@sentsin.com'
    ,'password': 123123
-    //,'quiz': 2
+    ,'quiz': 2
    ,'interest': 3
    ,'like[write]': true
    //,'open': false
@@ -233,11 +261,10 @@ layui.use(['form', 'layedit', 'laydate'], function(){
    ,'desc': 'form 是我们非常看重的一块'
    ,xxxxxxxxx: 123
  });
-  console.log(thisValue);

  
  //事件监听
-  form.on('select', function(data){
+  form.on('select(quiz111)', function(data){
    console.log('select: ', this, data);
  });
  
--- a/examples/json/table/demo1.json
+++ b/examples/json/table/demo1.json
@@ -4,7 +4,6 @@
  ,"count": 3000000
  ,"totalRow": {
    "experience": "666"
-    ,"logins": "999"
  }
  ,"data": [{
    "id": "10001"
--- a/examples/layer.html
+++ b/examples/layer.html
@@ -11,6 +11,9 @@

 <style>
 body{padding: 100px;}
+
+#photos li{float: left; margin: 0 1px 1px;}
+#photos img{max-height: 38px;}
 </style>
 </head>
 <body>
@@ -31,20 +34,75 @@ body{padding: 100px;}
 123
 </div>

+<hr><br>
+
+<div class="layui-list">
+  <ul class="layui-row" id="photos">
+    <li><img src="https://cdn.layui.com/upload/2017_3/168_1488985841996_23077.png"></li>
+    <li><img src="https://res.layui.com/static/images/fly/fly.jpg"></li>
+  </ul>
+</div>
+

 <script src="../src/layui.js"></script>
+
+<!-- layer 独立版调试 -->
+<script src1="//cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
+<script src1="../release/layer/src/layer.js"></script>
+
 <script>
-layui.use('layer', function(){
-  var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
+var runTest = function(run, $, layer){
+  if(!run) return;
+
+  var timer = setInterval(function(){
+    location.reload();
+  }, 1000);
  
+  $.ajax({
+    url: './all.html'
+    ,beforeSend: function(){
+      layer.load();
+    }
+    ,success: function(){
+      layer.closeAll('loading', function(){
+        setTimeout(function(){
+          if($('.layui-layer-loading').length){
+            console.error('layer close 异常');
+            clearInterval(timer);
+          }
+        }, 200);
+      });
+    }
+  });
+};
+window.jQuery && runTest(1, window.jQuery, window.layer);
+
+layui.use('layer', function(){
+  var $ = layui.jquery, layer = layui.layer;
+  //return
  
  var index = layer.msg('hello');
  //layer.close(index);
+  //runTest(1, $, layer);
+  
  
  //触发事件
  var active = {
    test: function(){
-      layer.alert('你好么，体验者');
+      layer.alert('你好么，体验者。<br>在标题栏显示自动关闭倒计秒数', {
+        time: 5*1000
+        ,success: function(layero, index){
+          var timeNum = this.time/1000, setText = function(start){
+            layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
+          };
+          setText(!0);
+          this.timer = setInterval(setText, 1000);
+          if(timeNum <= 0) clearInterval(this.timer);
+        }
+        ,end: function(){
+          clearInterval(this.timer);
+        }
+      });
    }
    ,test2: function(){
      layer.confirm('您是如何看待前端开发？', {
@@ -108,6 +166,17 @@ layui.use('layer', function(){
    
  };
  
+  //相册层
+  layer.photos({
+    photos: '#photos'
+  });
+  //动态追加
+  $('#photos').append('<li><img src="https://res.layui.com/static/images/sentsin/night.gif"></li>');
+  
+  //{"status":1,"msg":"","title":"JSON请求的相册","id":8,"start":0,"data":[{"alt":"layer","pid":109,"src":"//cdn.layui.com/upload/2017_3/168_1488985841996_23077.png","thumb":""},{"alt":"说好的，一起 Fly","pid":110,"src":"//res.layui.com/static/images/fly/fly.jpg","thumb":""},{"alt":"星空如此深邃","pid":113,"src":"//res.layui.com/static/images/sentsin/night.gif","thumb":""}]}
+  
+  
+  
  $('.demo').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
--- a/examples/rate.html
+++ b/examples/rate.html
@@ -68,11 +68,11 @@ layui.use(['rate'], function(){
  
  rate.render({
    elem: '#test1'
-    ,length: 3
-    ,value: 3.2
+    ,length: 5
+    ,value: 5
    ,text: true
    ,half: true
-    ,setText: function(value){
+    ,setText1: function(value){

      var arrs = {
        '0.5': '极差'
--- a/examples/table-test.html
+++ b/examples/table-test.html
@@ -0,0 +1,256 @@
+ 
+ 
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <title>表格操作 - layui</title>
+
+  <link rel="stylesheet" href="../src/css/layui.css">
+
+  <style>
+  body{padding: 20px; /*overflow-y: scroll;*/}
+  </style>
+</head>
+<body>
+
+<script type="text/html" id="toolbarDemo">
+  <div class="layui-btn-container">
+    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
+    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
+    <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页所有数据</button>
+    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
+    <button class="layui-btn layui-btn-sm" lay-event="reload">重载（保留初始参数）</button>
+    <button class="layui-btn layui-btn-sm" lay-event="reload2">重载（不保留初始参数）</button>
+    <button class="layui-btn layui-btn-sm" id="dropdown">
+      更多菜单 
+      <i class="layui-icon layui-icon-down layui-font-12"></i>
+  </button>
+  </div>
+</script>
+
+<script type="text/html" id="barDemo">
+  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
+  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
+</script>
+
+<script type="text/html" id="usernameTpl">
+  <a href="" class="layui-table-link">{{d.username || ''}}</a>
+</script>
+
+<script type="text/html" id="switchTpl">
+  <input type="checkbox" name="yyy" lay-skin="switch" lay-text="女|男">
+</script>
+
+<script type="text/html" id="cityTpl">
+  <select lay-ignore>
+    <option value="浙江杭州">浙江杭州</option>
+    <option value="江西南昌">江西南昌</option>
+    <option value="湖北武汉">湖北武汉</option>
+  </select>
+</script>
+
+<script type="text/html" id="checkboxTpl">
+  <input type="checkbox" name="" title="锁定" checked>
+</script>
+
+<script type="text/html" id="LAY_table_tpl_email">
+  <span {{# if(!d.activate){ }}style="color:#999"{{# } }}>{{ d.email }}</span>
+</script>
+
+<table id="test" lay-filter="test"></table>
+
+<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script>
+<script>
+layui.use(['table'], function(){
+  var table = layui.table
+  ,$ = layui.$
+  ,laytpl = layui.laytpl;
+  
+  //全局设定某参数
+  table.set({
+    where: {
+      token: '默认 token 参数'
+    }
+    //,defaultToolbar: ['filter']
+    ,limit: 30
+    //,url: 'list'
+    //,height: 300
+  });
+  
+  $('#appendtest').append($('#TPL_appendtest').html())
+  table.init('appendtest');
+  
+  //渲染
+  window.ins1 = table.render({
+    elem: '#test'
+    ,height: 400
+    //,width: 600
+    ,title: '用户数据表'
+    ,url: 'json/table/demo1.json'
+    //,size: 'lg'
+    ,page: {
+      
+    }
+    
+    //,autoSort: false //是否自动排序。如果否，则由服务端排序
+    //,loading: false
+    ,totalRow: true
+    ,limit: 30
+    ,toolbar: '#toolbarDemo'
+    ,defaultToolbar: ['filter', 'exports', 'print', {
+      title: '帮助'
+      ,layEvent: 'LAYTABLE_TIPS'
+      ,icon: 'layui-icon-tips'
+    }]
+    ,cols: [[
+      {type: 'checkbox', fixed: 'left'}
+      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
+      ,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
+      ,{field:'email', title:'邮箱', hide: 0, width:150, edit: 'text', templet: function(d){
+        console.log(d);
+        return '<em>'+ d.email +'</em>'
+      }}
+      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
+      ,{field:'city', title:'城市', width:120, templet: '#cityTpl'}
+      ,{field:'sign', title:'签名'}
+      ,{field:'experience', title:'积分', width:80, sort: true, totalRow: '{{ d.TOTAL_NUMS }}🍉', templet: '<div>{{ d.experience }} 分</div>'}
+      ,{field:'ip', title:'IP', width:120}
+      ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 次'}
+      ,{field:'joinTime', title:'加入时间', width:120}
+      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
+    ]]
+    
+    ,initSort1: {
+      field: 'experience' //排序字段，对应 cols 设定的各字段名
+      ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
+    }
+    
+    ,headers: {headers_token: 'sasasas'}
+    ,where: {
+      test: '初始 test 参数'
+      ,token: '初始 token'
+      ,key: 'experience'
+      ,order: 'asc'
+    }
+    
+    ,done: function(){
+      
+    }
+    
+    ,error: function(res, msg){
+      console.log(res, msg)
+    }
+
+    /*
+    ,response: {
+      statusName: 'status'
+      ,statusCode: 200
+    }
+    ,parseData: function(res){
+      return {
+        "status": res.status
+        ,"msg": res.message
+        ,"count": res.total
+        ,"data": res.data.list
+      };
+    }
+    */
+  });
+  
+  //排序事件
+  table.on('sort(test)', function(obj){
+    console.log(obj);
+
+    return;
+    layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
+    //服务端排序
+    table.reload('test', {
+      initSort: obj
+      //,page: {curr: 1} //重新从第一页开始
+      ,where: { //重新请求服务端
+        key: obj.field //排序字段
+        ,order: obj.type //排序方式
+      }
+    }, true);
+  });
+  
+  //工具栏事件
+  table.on('toolbar(test)', function(obj){
+    var checkStatus = table.checkStatus(obj.config.id);
+    switch(obj.event){
+      case 'add':
+        layer.msg('添加');
+      break;
+      case 'update':
+        layer.msg('编辑');
+      break;
+      case 'delete':
+        layer.msg('删除');
+      break;
+      case 'getCheckData':
+        var data = checkStatus.data;
+        layer.alert(JSON.stringify(data));
+      break;
+      case 'getCheckLength':
+        var data = checkStatus.data;
+        layer.msg('选中了：'+ data.length + ' 个');
+      break;
+      case 'getData':
+        var getData = table.getData(obj.config.id);
+        console.log(getData);
+        layer.alert(JSON.stringify(getData));
+      break;
+      case 'isAll':
+        layer.msg(checkStatus.isAll ? '全选': '未全选')
+      break;
+      case 'LAYTABLE_TIPS':
+        layer.alert('Table for layui-v'+ layui.v);
+      break;
+      case 'reload':
+        //深度重载
+        var instReload = table.reload('test', {
+          
+          where: {
+            abc: 123
+            ,test: '新的 test1'
+          }
+          ,page: {curr: 5, limit: 20}
+          ,cols: ins1.config.cols
+          //,height: 300
+          //,url: 'x'
+        }, true);
+      break;
+      case 'reload2':
+        //浅重载
+        table.reload('test', {
+          where: {
+            efg: 'sasasas'
+            //,test: '新的 test2'
+            //,token: '新的 token2'
+          }
+          ,cols: [[
+            {type: 'checkbox', fixed: 'left'}
+            ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
+            ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
+            ,{field:'experience', title:'积分', width:80, sort: true, totalRow: true, templet: '<div>{{ d.experience }} 分</div>'}
+            ,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
+            ,{field:'joinTime', title:'加入时间', width:120}
+          ]]
+          //,height: 500
+        });
+      break;
+    };
+  });
+
+  table.on('row(test)', function(obj){
+    console.log(obj);
+    //layer.closeAll('tips');
+  });
+  
+  
+});
+</script>
+</body>
+</html>
--- a/examples/table.html
+++ b/examples/table.html
@@ -3,15 +3,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-<title>表格操作 - layui</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <title>表格操作 - layui</title>

-<link rel="stylesheet" href="../src/css/layui.css">
+  <link rel="stylesheet" href="../src/css/layui.css">

-<style>
-body{padding: 20px; /*overflow-y: scroll;*/}
-</style>
+  <style>
+  body{padding: 20px; /*overflow-y: scroll;*/}
+  </style>
 </head>
 <body>

@@ -23,11 +23,28 @@ body{padding: 20px; /*overflow-y: scroll;*/}
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    <button class="layui-btn layui-btn-sm" lay-event="reload">重载（保留初始参数）</button>
    <button class="layui-btn layui-btn-sm" lay-event="reload2">重载（不保留初始参数）</button>
+    <button class="layui-btn layui-btn-sm" id="dropdown">
+      更多菜单 
+      <i class="layui-icon layui-icon-down layui-font-12"></i>
+  </button>
  </div>
 </script>

 <table id="test" lay-filter="test"></table>

+<div id="appendtest"></div>
+<script type="text/html" id="TPL_appendtest">
+  <table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}" lay-filter="appendtest">
+    <thead>
+      <tr>
+        <th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
+        <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
+        <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
+      </tr>
+    </thead>
+  </table>
+</script>
+
 <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
@@ -60,7 +77,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
 <table id="test2" lay-filter="test2"></table>

 <div style="display: none1;">
-  <table class="layui-table1" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
+  <table class="layui-table" lay-data="{width:800, height: 300, url:'json/table/demo2.json', page: true, limit: 6}">
    <thead>
      <tr>
        <th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
@@ -77,7 +94,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
    </thead>
  </table>

-  <table class="layui-table" lay-data="{url:'json/table/demo2.json', toolbar: '#toolbarDemo', page: true, limit: 6}">
+  <table class="layui-table" lay-data="{url:'json/table/demo2.json', page: true, limit: 6}">
    <thead>
      <tr>
        <th lay-data="{field:'username'}" rowspan="3">联系人</th>
@@ -181,8 +198,11 @@ body{padding: 20px; /*overflow-y: scroll;*/}

 <script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.0.1/layui.js" charset="utf-8"></script>
 <script>
-layui.use('table', function(){
-  var table = layui.table;
+layui.use(['table', 'dropdown'], function(){
+  var table = layui.table
+  ,$ = layui.$
+  ,laytpl = layui.laytpl
+  ,dropdown = layui.dropdown;
  
  //全局设定某参数
  table.set({
@@ -195,6 +215,9 @@ layui.use('table', function(){
    //,height: 300
  });
  
+  $('#appendtest').append($('#TPL_appendtest').html())
+  table.init('appendtest');
+  
  //渲染
  window.ins1 = table.render({
    elem: '#test'
@@ -222,6 +245,7 @@ layui.use('table', function(){
      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
      ,{field:'username', title:'用户名', width:120, edit: 'text', templet: '#usernameTpl'}
      ,{field:'email', title:'邮箱', hide: 0, width:150, edit: 'text', templet: function(d){
+        console.log(d);
        return '<em>'+ d.email +'</em>'
      }}
      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
@@ -247,6 +271,21 @@ layui.use('table', function(){
      ,order: 'asc'
    }
    
+    ,done: function(){
+      //下拉菜单
+      dropdown.render({
+        elem: '#dropdown' //可绑定在任意元素中，此处以上述按钮为例
+        ,data: [{
+          id: 0,
+          title: '刷新'
+        }]
+        //菜单被点击的事件
+        ,click: function(obj){
+          table.reload('test');
+        }
+      });
+    }
+    
    ,error: function(res, msg){
      console.log(res, msg)
    }