master

分支 (1)

管理

管理

master

layuiTablePlug
/
testTableCheckboxDisabled.html

<!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>tablePlug</title>
  <link rel="stylesheet" href="layui/src/css/layui.css" media="all">
  <style>
    body {
      margin: 10px;
    }

    .layui-form-label {
      width: 100px;
    }

    .layui-table-view tbody tr.layui-table-selected {
      background-color: hotpink;
    }

    .layui-table-view tbody tr.layui-table-selected.layui-table-hover {
      background-color: lightpink;
    }
  </style>
</head>
<!--<body class="layui-container">-->
<body>
<a href='https://gitee.com/sun_zoro/layuiTablePlug' target="gitee_tablePlug" style="position: absolute; right: 0;top:0;">
  <img src='https://gitee.com/sun_zoro/layuiTablePlug/widgets/widget_1.svg' alt='Fork me on Gitee'>
</a>
<div class="layui-container">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-xs12" style="margin-top: 10px;">
      <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" checked="checked" 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>
        </div>
      </div>
      <div id="demo" class="table_th_search" lay-filter="test"></div>
    </div>
  </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="moveBar">
  <a class="layui-btn layui-btn-xs" lay-event="moveUp"><i class="layui-icon layui-icon-up"></i>上移</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="moveDown"><i class="layui-icon layui-icon-down"></i>下移</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" lay-event="deleteSome">批量删除</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-warm" lay-event="reload" data-url="data_none">无数据</span>
    <span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="reload">重载</span>
    <span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="setDisabled">设置10003,10004,10010不可选</span>
    <span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="setDisabledNull">取消不可选</span>
    <span class="layui-btn layui-btn-sm" lay-event="openSelect">弹出选择</span>
    <span class="layui-btn layui-btn-sm" lay-event="openIframeSelect">弹出iframe选择</span>
    <span class="layui-btn layui-btn-sm" lay-event="addTempData">添加临时数据</span>
    <span class="layui-btn layui-btn-sm layui-btn-warm" lay-event="getTempData">获得临时数据</span>
    <span class="layui-btn layui-btn-sm layui-btn-danger" lay-event="cleanTempData">清空临时数据</span>


    <!--<span class="layui-btn layui-btn-sm layui-btn-primary" lay-event="ranksConversion">行列转换</span>-->
  </div>
  <div class="layui-inline">
    <span><span style="color: red;">※</span>url模式测试用的是json文件所以翻页请用这里按钮，不要用table的中的laypage组件，实际开发中不会有这个问题</span>
  </div>
</script>

<script src="layui/src/layui.js"></script>
<!--<script src="layui/release/zip/layui-v2.4.5/layui/layui.all.js"></script>-->
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
  layui.config({base: 'test/js/'})
    .use(['testTablePlug', 'laydate'], function () {

      var $ = layui.jquery
        , layer = layui.layer //弹层
        , form = layui.form //弹层
        , table = layui.table //表格
        , laydate = layui.laydate //日期控件
        , tablePlug = layui.tablePlug; //表格插件

      // 当前这个测试页面测试的重点不是智能重载，所以关掉该功能，实际上该功能也是默认关闭的，可以不执行下面这句代码，也可以强制指定。
      tablePlug.smartReload.enable(true);

      // 处理操作列
      var fn1 = function (field) {
        return function (data) {
          // return data[field];
          return [
            '<select name="city" lay-filter="city_select" lay-search="true">',
            '<option value="" >请选择或搜索</option>',
            '<option value="北京" >北京</option>',
            '<option value="天津" >天津</option>',
            '<option value="上海" >上海</option>',
            '<option value="广州" >广州</option>',
            '<option value="深圳" >深圳</option>',
            '<option value="佛山" >佛山</option>',
            '</select>'
          ].join('');
        };
      };

      var laytpl = layui.laytpl;
      var tplTemp = '你好！ <%d.name%>';

      var layuiTpl = function (template, data, callback, open, close) {
        laytpl.config({
          open: open || '{{',
          close: close || '}}'
        });
        var htmlTemp = laytpl(template).render(data, callback);
        laytpl.config({
          open: '{{',
          close: '}}'
        });
        return htmlTemp;
      };

      layer.msg(layuiTpl(tplTemp, {name: 'Layui'}, null, '<%', '%>'));

      table.render({
        elem: '#demo'
        // , height: 'full-120'
        , size: 'lg'
        , url: 'json/data11.json' //数据接口
        // , data: data
        , title: '用户表'
        , page: {} //开启分页
        , loading: true
        , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
        , totalRow: true //开启合计行
        , cellMinWidth: 90
        // 是否开启字段筛选的记忆功能，支持true/false/'local'/'session'/其他 开启的情况下默认是session，除非显式的指定为'local'
        , colFilterRecord: true
        // 开启智能重载
        , smartReloadModel: true
        // 设置开启部分选项不可选
        // 设置表格的主键（主要用在记录选中状态还有不可操作记录的时候用
        , primaryKey: 'id'
        , checkDisabled: {
          enabled: true,
          data: [10000, 10001, 10002, 10003, 10004, 10005, 10009]
        }
        // , pageLanguage: 'zh-TW' // 需要自己定义对应的文本
        // , pageLanguage: 'en' // tablePlug里面已经定义了，如果觉得不满意可以用tablePlug.set去更新默认的配置;
        // , pageLanguage: true // 无效的设置方式，只支持字符串或者对象的
        // 也可以针对某个表格有特殊的配置如下面对象的设置方法,但是如果没有必要单独的自定义建议使用直接赋值成语言名称的字符串形式
        , pageLanguage: {
          lan: 'en',
          // 可自定义text,lan为en的情况下
          text: {
            // jumpTo: 'jump to', // 到第
            // page: 'page', // 页
            // go: 'go', // 确定
            // total: 'total', // 共
            unit: 'item' // 条（单位，一般也可以不填）
            // optionText: 'limit each page' // 条/页
          }
        }
        , done: function () {
          var tableView = this.elem.next();

          tableView.find('.layui-table-grid-down').remove();
          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);
            }
          });

          // 初始化laydate
          layui.each(tableView.find('td[data-field="birthday"]'), function (index, tdElem) {
            tdElem.onclick = function (event) {
              layui.stope(event)
            };
            laydate.render({
              elem: tdElem.children[0],
              // closeStop: tdElem,
              format: 'yyyy/MM/dd',
              done: function (value, date) {
                var trElem = $(this.elem[0]).closest('tr');
                table.cache.demo[trElem.data('index')]['birthday'] = value;
              }
            })
          })

          // table.eachCols(this.id, function (index, col) {
          //   if (col.search && col.field && !tableView.find('th[data-field="'+col.field+'"]').find('div.layui-table-cell').find('.layui-table-th-search').length) {
          //     tableView.find('th[data-field="'+col.field+'"]').find('div.layui-table-cell').append('<br><input class="layui-input layui-table-th-search">');
          //   }
          // })
        },
        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: {}
        // , autoSort: false
        // , initSort: {
        //   field: 'id' //排序字段，对应 cols 设定的各字段名
        //   , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
        // }
        , cols: [
          [
            {type: 'checkbox', fixed: 'left', rowspan: 2},
            {type: 'numbers', fixed: 'left', rowspan: 2},
            {
              field: 'id',
              title: 'ID',
              filter: true,
              width: 80,
              sort: true,
              fixed: 'left',
              totalRowText: '平均:',
              rowspan: 2
            },
            {title: '基本信息', colspan: 3, align: 'center'},
            {title: '详细信息', colspan: 6, align: 'center'},
            {
              fixed: 'right',
              type: 'toolbar',
              field: 'toolbar_move',
              title: '',
              width: 150,
              align: 'center',
              toolbar: '#moveBar',
              rowspan: 2
            },
            {
              fixed: 'right',
              type: 'toolbar',
              field: 'toolbar_common',
              title: '操作',
              width: 90,
              align: 'center',
              toolbar: '#barDemo',
              rowspan: 2
            }
          ]
          , [ //表头
            {field: 'username', title: '姓名', hideable: false}
            , {field: 'sex', title: '性别', width: 90, filter: true, sort: true}
            , {field: 'birthday', title: '生日', edit: false, width: 120}
            , {field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
            , {field: 'score', title: '评分', edit: true, event: 'editField', width: 90, sort: true, totalRow: true}
            , {field: 'city', title: '城市', search: true, edit: false, width: 150, type: 'normal', templet: fn1('city')}
            , {field: 'sign', title: '签名', width: 200}
            , {field: 'classify', title: '职业', filter: true, width: 100}
            , {field: 'wealth', title: '财富', width: 135, filter: true, sort: true, totalRow: true}
          ]
        ]
      });

      // 监听表格中的下拉选择将数据同步到table.cache中
      form.on('select(city_select)', function (data) {
        var selectElem = $(data.elem);
        var tdElem = selectElem.closest('td');
        var trElem = tdElem.closest('tr');
        var tableView = trElem.closest('.layui-table-view');
        table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
      });

      //监听排序事件
      table.on('sort(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        // console.log(obj.field); //当前排序的字段名
        // console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        // console.log(this); //当前排序的 th 对象

        //尽管我们的 table 自带排序功能，但并没有请求服务端。
        //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
        table.reload('demo', {
          initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
          , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            field: obj.field //排序字段
            , order: obj.type //排序方式
          }
        });

        // layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
      });

      // 监听编辑如果评分负数给回滚到修改之前并且弹出提示信息并且重新获得焦点等待输入
      table.on('edit(test)', function (obj) {
        var tableId = obj.tr.closest('.layui-table-view').attr('lay-id');
        var trIndex = obj.tr.data('index');
        var that = this;
        var tdElem = $(that).closest('td');

        var field = obj.field;
        var value = obj.value;
        if (field === 'score') {
          value = parseInt(value);
          if (value < 0) {
            setTimeout(function () {
              // 小于0回滚再次获得焦点打开
              obj.update({score: table._dataTemp[tableId][trIndex][field]});
              layer.msg('评分不能为负数!', {anim: 6});
              tdElem.click();
            }, 100);
          }
        }
      });

      // tr点击触发复选列点击
      $(document).on('click', '.layui-table-view tbody tr', function (event) {
        var elemTemp = $(this);
        var tableView = elemTemp.closest('.layui-table-view');
        var trIndex = elemTemp.data('index');
        tableView.find('tr[data-index="' + trIndex + '"]').find('[name="layTableCheckbox"]+').last().click();
      })
    });
</script>
</body>
</html>