layuiTablePlug/testTableReload.html at master · ancientry/layuiTablePlug · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<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>测试表格重载</title>
  <link rel="stylesheet" href="layui/src/css/layui.css" media="all">
  <style>
    body {
      margin: 10px;
    }

    .layui-form-label {
      width: 100px;
    }
  </style>
</head>
<body>
<div class="layui-row layui-col-space10">
  <div class="layui-col-xs12">
    <div class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label">是否跨页记录</label>
        <div class="layui-input-inline">
          <input type="checkbox" name="status" lay-skin="switch" lay-filter="statusSwitch">
        </div>
        <div class="layui-input-inline">
          <span class="layui-btn layui-btn-sm layui-btn-danger" onclick="resetCheckboxStatus(this)" data-id="demo">重置选中状态</span>
        </div>

        <label class="layui-form-label" style="width: 135px;">是否启用智能reload</label>
        <div class="layui-input-inline">
          <input type="checkbox" name="status" lay-skin="switch" lay-filter="smartSwitch" checked="">
        </div>
        <label class="layui-form-label" style="width: 190px;">当前表格要不要智能reload</label>
        <div class="layui-input-inline">
          <input type="checkbox" name="status" lay-skin="switch" lay-filter="tableSmartSwitch" checked="">
        </div>
      </div>
    </div>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
  </div>
</div>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <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="toolbarDemo">
  <div class="layui-btn-container layui-inline">
    <span class="layui-btn layui-btn-sm" lay-event="getChecked">获得选中的数据</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="jump" data-page="1">第1页</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="jump" data-page="2">第2页</span>
    <span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="reload">重载(table.reload)</span>
    <span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="reloadIns">另一种重载(tableIns.reload)</span>
  </div>
  <div class="layui-input-inline">
    <input name="name" class="layui-input">
  </div>
  <div class="layui-btn-container layui-inline">
    <span class="layui-btn layui-btn-sm layui-btn-danger" lay-event="reload" data-url="data_null">error(404,500)</span>
    <span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="reload" data-url="data_none">无数据</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="reload" data-url="data_code_error">状态码异常</span>
    <!--<span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="reload" data-url="data11" data-option="{totalRow: false}">不显示totalRow</span>-->
    <!--<span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="reload" data-url="data11" data-option="{totalRow: true}">显示totalRow</span>-->
    <span class="layui-btn layui-btn-sm" lay-event="reload" data-url="data11">正常</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="reload" data-url="data11" data-option="{page: {curr: 1}}">分页</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="reload" data-url="data11" data-option="{page: false}">不分页</span>
  </div>
</script>

<script src="layui/src/layui.js"></script>
<script>

  layui.config({base: 'test/js/'}).use(['testTablePlug'], function () {
    var $ = layui.jquery
      , layer = layui.layer //弹层
      , form = layui.form //弹层
      , table = layui.table //表格
      , tablePlug = layui.tablePlug //表格插件

    // 开启智能重载模式，注意这个需要修改一处源码才能支持，考虑到有的人要有的人不要，所以做了一个全局的开关，默认是关闭的，开了之后在修改源码的基础上
    // 支持智能的reload，支持重载和重新请求数据两种模式，同时支持对某个table设置是否需要这个功能smartReloadModel: true/flase
    tablePlug.smartReload.enable(true);

    // 处理操作列
    var fn1 = function (field) {
      return function (data) {
        return data[field];
      };
    };

    //执行一个 table 实例
    table.render({
      elem: '#demo'
      , height: 600
      , url: 'json/data11.json' //数据接口
      // , data: data
      , page: {}
      , title: '用户表'
      // , page: {} //开启分页
      , loading: true
      , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      , totalRow: true //开启合计行
      , cellMinWidth: 90
      // 是否开启字段筛选的记忆功能，支持true/false/'local'/'session'/其他 开启的情况下默认是session，除非显式的指定为'local'
      , colFilterRecord: true
      // 是否开启智能reload的模式
      , smartReloadModel: true
      , done: function () {
        var tableView = this.elem.next();
        var totalRow = tableView.find('.layui-table-total');
        var limit = this.page ? this.page.limit : this.limit;
        layui.each(totalRow.find('td'), function (index, tdElem) {
          tdElem = $(tdElem);
          var text = tdElem.text();
          if (text && !isNaN(text)) {
            text = (parseFloat(text) / limit).toFixed(2);
            tdElem.find('div.layui-table-cell').html(text);
          }
        });
      },
      parseData: function (ret) {
        return {
          code: ret.code,
          msg: ret.msg,
          count: ret.data ? (ret.data.total || 0) : 0,
          data: ret.data ? (ret.data.list || []) : []
        }
      }
      // , checkStatus: {}
      , cols: [
        [
          {type: 'checkbox', fixed: 'left', rowspan: 2},
          {
            type: 'numbers',
            fixed: 'left',
            rowspan: 2
          },
          {
            field: 'id',
            title: 'ID',
            width: 80,
            sort: true,
            fixed: 'left',
            totalRowText: '平均:',
            rowspan: 2
          },
          {title: '基本信息', colspan: 2, align: 'center'},
          {title: '详细信息', colspan: 6, align: 'center'},
          {
            fixed: 'right',
            type: 'toolbar',
            field: 'toolbar_common',
            title: '操作',
            width: 80,
            align: 'center',
            toolbar: '#barDemo',
            rowspan: 2
          }
        ]
        , [ //表头
          {field: 'username', title: '姓名', hideable: false}
          , {field: 'sex', title: '性别', width: 90, sort: true}
          , {field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
          , {field: 'score', title: '评分', edit: true, width: 90, sort: true, totalRow: true}
          , {field: 'city', title: '城市', width: 150, templet: fn1('city')}
          , {field: 'sign', title: '签名', width: 200}
          , {field: 'classify', title: '职业', width: 100}
          , {field: 'wealth', title: '财富', width: 135, edit: true, sort: true, totalRow: true}
        ]
      ]
    });
  });
</script>
</body>
</html>