layuiTablePlug
/
testTableCheckboxStatus.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 .layui-table-body tr.table_tr_click {
      background-color: pink;
    }
  </style>
</head>
<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-row layui-col-space10">
  <div class="layui-col-md6 layui-col-sm12">
    <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>
      </div>
    </div>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
  </div>
  <div class="layui-col-md6 layui-col-sm12">
    <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" disabled 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="demo2">重置选中状态</span>
        </div>
      </div>
    </div>
    <!--    <table class="layui-hide" id="demo2" lay-filter="test"></table>-->
    <table class="layui-hide" lay-id="demo2" 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="getCheckedStatus">获得选中的状态</span>
    {{# if(d.checkStatus) {}}
    <span class="layui-btn layui-btn-sm" lay-event="deleteSome">批量删除</span>
    {{# } }}
    {{# if(d.id === 'demo'){ }}
    <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>
  </div>
  <div class="layui-inline">
    {{# if(d.id === 'demo'){ }}
    <span><span style="color: red;">※</span>url模式测试用的是json文件所以翻页请用这里按钮，不要用table的中的laypage组件，实际开发中不会有这个问题</span>
    {{# } else {}}
    <span>data模式测试</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; //表格插件

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

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

    var data = [
      {
        "id": 10000,
        "username": "user-0",
        "sex": "女",
        "city": "城市-0",
        "sign": "签名-0",
        "experience": 0,
        "logins": 24,
        "wealth": 82830700,
        "classify": "作家",
        "score": 57
      },
      {
        "id": 10001,
        "username": "user-1",
        "sex": "男",
        "city": "城市-1",
        "sign": "签名-1",
        "experience": 884,
        "logins": 58,
        "wealth": 64928690,
        "classify": "词人",
        "score": 27
      },
      {
        "id": 10002,
        "username": "user-2",
        "sex": "女",
        "city": "城市-2",
        "sign": "签名-2",
        "experience": 650,
        "logins": 77,
        "wealth": 6298078,
        "classify": "酱油",
        "score": 31
      },
      {
        "id": 10003,
        "username": "user-3",
        "sex": "女",
        "city": "城市-3",
        "sign": "签名-3",
        "experience": 362,
        "logins": 157,
        "wealth": 37117017,
        "classify": "诗人",
        "score": 68
      },
      {
        "id": 10004,
        "username": "user-4",
        "sex": "男",
        "city": "城市-4",
        "sign": "签名-4",
        "experience": 807,
        "logins": 51,
        "wealth": 76263262,
        "classify": "作家",
        "score": 6
      },
      {
        "id": 10005,
        "username": "user-5",
        "sex": "女",
        "city": "城市-5",
        "sign": "签名-5",
        "experience": -173,
        "logins": 68,
        "wealth": 60344147,
        "classify": "作家",
        "score": 87
      },
      {
        "id": 10006,
        "username": "user-6",
        "sex": "女",
        "city": "城市-6",
        "sign": "签名-6",
        "experience": -982,
        "logins": 37,
        "wealth": 57768166,
        "classify": "作家",
        "score": 34
      },
      {
        "id": 10007,
        "username": "user-7",
        "sex": "男",
        "city": "城市-7",
        "sign": "签名-7",
        "experience": -727,
        "logins": 150,
        "wealth": 82030578,
        "classify": "作家",
        "score": 28
      },
      {
        "id": 10008,
        "username": "user-8",
        "sex": "男",
        "city": "城市-8",
        "sign": "签名-8",
        "experience": -951,
        "logins": 133,
        "wealth": 16503371,
        "classify": "词人",
        "score": 14
      },
      {
        "id": 10009,
        "username": "user-9",
        "sex": "女",
        "city": "城市-9",
        "sign": "签名-9",
        "experience": 0,
        "logins": 25,
        "wealth": 86801934,
        "classify": "词人",
        "score": 75
      },
      {
        "id": 10010,
        "username": "user-10",
        "sex": "女",
        "city": "城市-10",
        "sign": "签名-10",
        "experience": 1016,
        "logins": 182,
        "wealth": 71294671,
        "classify": "诗人",
        "score": 34
      },
      {
        "id": 10011,
        "username": "user-11",
        "sex": "女",
        "city": "城市-11",
        "sign": "签名-11",
        "experience": 492,
        "logins": 107,
        "wealth": 8062783,
        "classify": "诗人",
        "score": 6
      },
      {
        "id": 10012,
        "username": "user-12",
        "sex": "女",
        "city": "城市-12",
        "sign": "签名-12",
        "experience": 106,
        "logins": 176,
        "wealth": 42622704,
        "classify": "词人",
        "score": 54
      },
      {
        "id": 10013,
        "username": "user-13",
        "sex": "男",
        "city": "城市-13",
        "sign": "签名-13",
        "experience": 1047,
        "logins": 94,
        "wealth": 59508583,
        "classify": "诗人",
        "score": 63
      },
      {
        "id": 10014,
        "username": "user-14",
        "sex": "男",
        "city": "城市-14",
        "sign": "签名-14",
        "experience": 873,
        "logins": 116,
        "wealth": 72549912,
        "classify": "词人",
        "score": 8
      },
      {
        "id": 10015,
        "username": "user-15",
        "sex": "女",
        "city": "城市-15",
        "sign": "签名-15",
        "experience": 1068,
        "logins": 27,
        "wealth": 52737025,
        "classify": "作家",
        "score": 28
      },
      {
        "id": 10016,
        "username": "user-16",
        "sex": "女",
        "city": "城市-16",
        "sign": "签名-16",
        "experience": 862,
        "logins": 168,
        "wealth": 37069775,
        "classify": "酱油",
        "score": 86
      },
      {
        "id": 10017,
        "username": "user-17",
        "sex": "女",
        "city": "城市-17",
        "sign": "签名-17",
        "experience": 1060,
        "logins": 187,
        "wealth": 66099525,
        "classify": "作家",
        "score": 69
      }
    ];

    //执行一个 table 实例
    table.render({
      elem: '#demo'
      // , height: 'full-200'
      , url: 'json/data11.json' //数据接口
      // , data: data
      , title: '用户表'
      , page: {} //开启分页
      , loading: true
      , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      , totalRow: true //开启合计行
      , cellMinWidth: 90
      // 是否开启字段筛选的记忆功能，支持true/false/'local'/'session'/其他 开启的情况下默认是session，除非显式的指定为'local'
      , colFilterRecord: 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},
          {
            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: 190,
            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, sort: true, totalRow: true}

        ]
      ]
    });

    table.render({
      // elem: '#demo2'
      elem: '[lay-id="demo2"]'
      // , height: 'full-200'
      // , url: 'json/data11.json' //数据接口
      , data: data
      , title: '用户表'
      , page: {} //开启分页
      // , page: false
      // , limit: 100
      , loading: true
      , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      , totalRow: true //开启合计行
      , cellMinWidth: 90
      // , autoSort: false // 不进行前端排序
      , 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);
          }
        });
      }
      // 定制当前数据的主键字段，默认为id，
      , primaryKey: 'id'
      // 是否开启复选列状态记录 支持true/false/{} true的情况下primaryKey默认为id，default默认为[]
      // primaryKey: 'username', // 可以定义成其他的字段，但是有一个要求，就是这个字段的值必须有唯一性约束，这个是一个判断记录是否相同重要的条件
      , checkStatus: {
        // 原始已经选中的记录的主键值集合
        default: [10001, 10002, 10007, 10009, 10013, 10015]
      }
      , checkDisabled: {
        enabled: true,
        data: [10000, 10001, 10002, 10003, 10004, 10005, 10009]
      }
      , smartReloadModel: true
      , cols: [
        [
          {type: 'checkbox', 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: 190,
            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: '职业', filter: true, width: 100}
          , {field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}

        ]
      ]
    });

    $(document).on('click', '.layui-table-view .layui-table-body tr', function (event) {
      var trElem = $(this);
      var tableView = trElem.closest('.layui-table-view');
      tableView.find('.layui-table-body tr.table_tr_click').removeClass('table_tr_click');
      tableView.find('.layui-table-body tr[data-index="' + trElem.data('index') + '"]').addClass('table_tr_click');
    })

  });
</script>
</body>
</html>