update

2022-06-27 00:29:24 +08:00
parent 37443a5c45
commit 8cf6798137
7 changed files with 136 additions and 79 deletions
--- a/examples/json/table/demo1.json
+++ b/examples/json/table/demo1.json
@@ -3,7 +3,7 @@
  ,"msg": ""
  ,"count": 3000000
  ,"totalRow": {
-    "experience": "777"
+    "checkin": "777"
  }
  ,"data": [{
    "id": "10001"
@@ -11,11 +11,12 @@
    ,"email": "test1@email.com"
    ,"sex": "<strong>男</strong>"
    ,"city": "浙江杭州"
-    ,"sign": "鼠标移动到此处，可以通过点击单元格右侧的下拉图标，查看到被隐藏的全部内容。"
+    ,"sign": "舍南舍北皆春水，但见群鸥日日来。花径不曾缘客扫，蓬门今始为君开。盘飧市远无兼味，樽酒家贫只旧醅。肯与邻翁相对饮，隔篱呼取尽余杯。"
    ,"experience": 7
    ,"ip": "192.168.0.8"
-    ,"logins": 0
+    ,"checkin": 0
    ,"joinTime": "2016-10-14"
+    ,"LAY_DISABLED": true
  }, {
    "id": "10002"
    ,"username": "李白"
@@ -25,7 +26,7 @@
    ,"sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。"
    ,"experience": 9
    ,"ip": "192.168.0.8"
-    ,"logins": "106"
+    ,"checkin": "106"
    ,"joinTime": "2016-10-14"
    ,"LAY_CHECKED": true
  }, {
@@ -34,10 +35,10 @@
    ,"email": "test3@email.com"
    ,"sex": "男"
    ,"city": "浙江杭州"
-    ,"sign": "人生恰似一场修行"
+    ,"sign": "大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。"
    ,"experience": 8
    ,"ip": "192.168.0.8"
-    ,"logins": null
+    ,"checkin": null
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10004"
@@ -48,7 +49,7 @@
    ,"sign": "人生恰似一场修行"
    ,"experience": 6
    ,"ip": "192.168.0.8"
-    ,"logins": "106"
+    ,"checkin": "106"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10005"
@@ -59,7 +60,7 @@
    ,"sign": "人生恰似一场修行"
    ,"experience": 64
    ,"ip": "192.168.0.8"
-    ,"logins": "106"
+    ,"checkin": "106"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10006"
@@ -70,7 +71,7 @@
    ,"sign": "人生恰似一场修行"
    ,"experience": 65
    ,"ip": "192.168.0.8"
-    ,"logins": "106"
+    ,"checkin": "106"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10007"
@@ -81,7 +82,7 @@
    ,"sign": "人生恰似一场修行"
    ,"experience": 49
    ,"ip": "192.168.0.8"
-    ,"logins": "106"
+    ,"checkin": "106"
    ,"joinTime": "2016-10-14"
  }, {
    "id": "10008"
@@ -92,7 +93,7 @@
    ,"sign": "人生恰似一场修行"
    ,"experience": 5
    ,"ip": "192.168.0.8"
-    ,"logins": "106"
+    ,"checkin": "106"
    ,"joinTime": "2016-10-14"
  }]
 }  
--- a/examples/table-test.html
+++ b/examples/table-test.html
@@ -21,7 +21,6 @@
 <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>

@@ -85,7 +84,21 @@ layui.use(['table', 'dropdown'], function(){
  var laytpl = layui.laytpl;
  var dropdown = layui.dropdown;
  var form = layui.form;
-  
+
+
+  // 仅用于各类测试的表头
+  var test_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'}
+    ,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'}
+    ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
+    ,{field:'city', title:'城市', width: 120}
+    ,{field:'sign', title:'签名'}
+    ,{field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊'}
+    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
+  ]];
+
  // 全局设定某参数
  table.set({
    where: {
@@ -97,9 +110,6 @@ layui.use(['table', 'dropdown'], function(){
    //,height: 300
  });
  
-  $('#appendtest').append($('#TPL_appendtest').html())
-  table.init('appendtest');
-  
  //渲染
  window.ins1 = table.render({
    elem: '#test'
@@ -109,7 +119,7 @@ layui.use(['table', 'dropdown'], function(){
    ,url: 'json/table/demo1.json'

    ,pagebar: '#pagebarDemo' // 分页栏模板
-    ,lineStyle: 'height: 100px;' // 行样式
+    ,lineStyle: 'height: 95px;' // 行样式
    ,css: [ // 自定义样式
      '.layui-table-page{text-align: right;}'
      ,'.layui-table-pagebar{float: left;}'
@@ -120,7 +130,9 @@ layui.use(['table', 'dropdown'], function(){
    //,autoSort: false //是否自动排序。如果否，则由服务端排序
    //,loading: false
    ,totalRow: true
-    ,page: true
+    ,page: {
+      // curr: layui.data('tableCache').curr || 1 // 读取记录中的页码，赋值给起始页
+    }
    ,limit: 30
    ,toolbar: '#toolbarDemo'
    ,defaultToolbar: ['filter', 'exports', 'print', {
@@ -129,17 +141,7 @@ layui.use(['table', 'dropdown'], function(){
      ,icon: 'layui-icon-tips'
    }]
    //,escape: false
-    ,cols: !1 ? [[ //仅用于测试
-      {type: 'checkbox', fixed: 'left'}
-      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计：'}
-      ,{field:'username', title:'用户名', width:120, edit: 'text'}
-      ,{field:'email', title:'邮箱 <i class="layui-icon layui-icon-email"></i>', hide: 0, width:150, edit: 'text'}
-      ,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
-      ,{field:'city', title:'城市', width:120}
-      ,{field:'sign', title:'签名'}
-      ,{field: 'experience', title: '积分', width:80, sort: true, align:'center', totalRow: '{{ d.TOTAL_NUMS }} 😊'}
-      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
-    ]] : [[
+    ,cols: !1 ? test_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'}
@@ -152,15 +154,16 @@ layui.use(['table', 'dropdown'], function(){
        var td = obj.td(this.field); //获取当前 td
        return td.find('select').val();
      }}
-      ,{field:'sign', title:'签名', edit: 'textarea'}
-      ,{field: 'experience', title: '积分', width:80, sort: true, align:'center', 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:'sign', title:'签名', minWidth: 200, style:'color: #5FB878', edit: 'textarea'}
+      ,{field: 'experience', title: '积分', width: 100, sort: true, align:'center', totalRow: !1 || '{{= d.TOTAL_NUMS }} 分 😊', templet: '<div><a href="" class="layui-table-link">{{ d.experience }}</a> 分</div>'}
+      ,{field:'ip', title:'IP', width: 120, align: 'right'}
+      ,{field:'checkin', title:'打卡', width: 100, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }} 次'}
      ,{field:'joinTime', title:'加入时间', width: 120}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width: 180}
    ]]
    
-    ,initSort1: {
+    //,autoSort: false // 禁用前端自动排序
+    ,initSort11111: { // 初始排序状态
      field: 'experience' //排序字段，对应 cols 设定的各字段名
      ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
    }
@@ -172,9 +175,17 @@ layui.use(['table', 'dropdown'], function(){
      ,key: 'experience'
      ,order: 'asc'
    }
-    ,done: function(){
+    ,done: function(res, curr, count){
      var id = this.id;

+      // 记录当前页码
+      /*
+      layui.data('tableCache', {
+        key: 'curr',
+        value: curr
+      });
+      */
+
      // 重载测试
      dropdown.render({
        elem: '#reloadTest' //可绑定在任意元素中，此处以上述按钮为例
@@ -326,19 +337,20 @@ layui.use(['table', 'dropdown'], function(){
  
  //排序事件
  table.on('sort(test)', function(obj){
-    console.log(obj);
+    //console.log(obj);

-    return;
+    //return;
    layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
+
    //服务端排序
-    table.reload('test', {
-      initSort: obj
-      //,page: {curr: 1} //重新从第一页开始
-      ,where: { //重新请求服务端
-        key: obj.field //排序字段
-        ,order: obj.type //排序方式
+    table.reloadData('test', {
+      //initSort: obj,
+      //page: {curr: 1}, //重新从第一页开始
+      where: { // 向服务端传入排序参数
+        key: obj.field, //排序字段
+        order: obj.type //排序方式
      }
-    }, true);
+    });
  });
  
  // 工具栏事件
@@ -351,10 +363,6 @@ layui.use(['table', 'dropdown'], function(){
        var data = checkStatus.data;
        layer.alert(layui.util.escape(JSON.stringify(data)));
      break;
-      case 'getCheckLength':
-        var data = checkStatus.data;
-        layer.msg('选中了：'+ data.length + ' 个');
-      break;
      case 'getData':
        var getData = table.getData(id);
        console.log(getData);
--- a/examples/table.html
+++ b/examples/table.html
@@ -201,6 +201,7 @@ layui.use('table', function(){
    //,height: 300
    ,cellMinWidth: 80
    //,skin: 'line'
+    //,size: 'lg'
    ,toolbar: true
    ,cols: [[
      {field: 'id', hide: true}
@@ -236,7 +237,7 @@ layui.use('table', function(){
      ,{field: 'sex', title: '性别', width: 80}
      ,{field: 'city', title: '城市', width: 100}
      // ,{field: 'experience', title: '积分', width: 80, sort: true}
-      ,{field: 'experience', title: '积分', width: 80, sort: true, totalRow: true, totalRowDecimals: 3}
+      ,{field: 'experience', title: '积分', width: 80, sort: true, totalRow: '{{= parseInt(d.TOTAL_NUMS) }}'}
    ]]
    ,data: [{
      "id": "10001"