您使用的是过时的浏览器。为更快,更安全的浏览器的经验,今天免费升级.

table 数据表格文档 - layui.table

650

table 模块是我们的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。尽管如此,我们仍将对其进行完善,在控制代码量和性能的前提下,不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。

上面你已经看到了一个简单数据表格的基本样子,你一定迫不及待地想知道它的使用方式。下面就是它对应的代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>table模块快速使用</title>
  6. <link rel="stylesheet" href="/layui/css/layui.css" media="all">
  7. </head>
  8. <body>
  9.  
  10. <table id="demo" lay-filter="test"></table>
  11.  
  12. <script src="/layui/layui.js"></script>
  13. <script>
  14. layui.use('table', function(){
  15. var table = layui.table;
  16.  
  17. //第一个实例
  18. table.render({
  19. elem: '#demo'
  20. ,height: 312
  21. ,url: '/demo/table/user/' //数据接口
  22. ,page: true //开启分页
  23. ,cols: [[ //表头
  24. {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
  25. ,{field: 'username', title: '用户名', width:80}
  26. ,{field: 'sex', title: '性别', width:80, sort: true}
  27. ,{field: 'city', title: '城市', width:80}
  28. ,{field: 'sign', title: '签名', width: 177}
  29. ,{field: 'experience', title: '积分', width: 80, sort: true}
  30. ,{field: 'score', title: '评分', width: 80, sort: true}
  31. ,{field: 'classify', title: '职业', width: 80}
  32. ,{field: 'wealth', title: '财富', width: 135, sort: true}
  33. ]]
  34. });
  35.  
  36. });
  37. </script>
  38. </body>
  39. </html>