layuiTablePlug
/
testTableReversal.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>测试表格反转</title>
  <link rel="stylesheet" href="layui/src/css/layui.css" media="all">
  <style>
    body {
      /*margin: 10px;*/
    }
    table.myTable+ .layui-table-view.vertical thead tr:first-child th .layui-table-cell {
      width: 48px;
    }
  </style>
</head>
<body>

<table class="layui-hide myTable" id="demo" lay-filter="test"></table>

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

  layui.config({base: 'layui/plug/'}).extend({tablePlug: 'tablePlug/tablePlug'})
    .use(['tablePlug'], function () {
      var tablePlug = layui.tablePlug;
      var table = layui.table;

      table.render({
        elem: '#demo'
        , height: 500
        // , url: 'json/data.json' //数据接口
        , data:[
          {name: '河北', chema: 28, rengong: 39},
          {name: '北京', chema: 43, rengong: 49},
          {name: '上海', chema: 78, rengong: 71},
          {name: '成都', chema: 25, rengong: 28},
          {name: '广州', chema: 102, rengong: 78}
        ]
        , title: '用户表'
        // , page: false //开启分页
        , loading: true
        , cellMinWidth: 90
        // 默认反转
        , reversal: true
        , cols: [
          [
            {title: ''},
            {title: 1},
            {title: 2},
            {title: 3},
            {title: 4},
            {title: 5}
          ]
          , [ //表头
            {field: 'name', title: '名称'},
            {field: 'chema', title: '车马费'},
            {field: 'rengong', title: '人工费'},
            {field: 'bangong', title: '办公费用'},
            {field: 'can', title: '餐费'},
            {field: 'pei', title: '培训费'}
          ]
        ]
      });
    });
</script>
</body>
</html>