data.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <title>赋值已知数据 - 数据表格</title>
  2. <div class="layui-card layadmin-header">
  3. <div class="layui-breadcrumb" lay-filter="breadcrumb">
  4. <a lay-href="">主页</a>
  5. <a><cite>组件</cite></a>
  6. <a><cite>数据表格</cite></a>
  7. <a><cite>简单用法</cite></a>
  8. </div>
  9. </div>
  10. <div class="layui-fluid">
  11. <div class="layui-row layui-col-space15">
  12. <div class="layui-col-md12">
  13. <div class="layui-card">
  14. <div class="layui-card-header">赋值已知数据</div>
  15. <div class="layui-card-body">
  16. <table class="layui-hide" id="test-table-data"></table>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. <script>
  23. layui.use(['admin', 'table'], function(){
  24. var table = layui.table;
  25. //展示已知数据
  26. table.render({
  27. elem: '#test-table-data'
  28. ,cols: [[ //标题栏
  29. {field: 'id', title: 'ID', width: 80, sort: true}
  30. ,{field: 'username', title: '用户名', width: 120}
  31. ,{field: 'email', title: '邮箱', minWidth: 150}
  32. ,{field: 'sign', title: '签名', minWidth: 160}
  33. ,{field: 'sex', title: '性别', width: 80}
  34. ,{field: 'city', title: '城市', width: 100}
  35. ,{field: 'experience', title: '积分', width: 80, sort: true}
  36. ]]
  37. ,data: [{
  38. "id": "10001"
  39. ,"username": "杜甫"
  40. ,"email": "xianxin@layui.com"
  41. ,"sex": "男"
  42. ,"city": "浙江杭州"
  43. ,"sign": "人生恰似一场修行"
  44. ,"experience": "116"
  45. ,"ip": "192.168.0.8"
  46. ,"logins": "108"
  47. ,"joinTime": "2016-10-14"
  48. }, {
  49. "id": "10002"
  50. ,"username": "李白"
  51. ,"email": "xianxin@layui.com"
  52. ,"sex": "男"
  53. ,"city": "浙江杭州"
  54. ,"sign": "人生恰似一场修行"
  55. ,"experience": "12"
  56. ,"ip": "192.168.0.8"
  57. ,"logins": "106"
  58. ,"joinTime": "2016-10-14"
  59. ,"LAY_CHECKED": true
  60. }, {
  61. "id": "10003"
  62. ,"username": "王勃"
  63. ,"email": "xianxin@layui.com"
  64. ,"sex": "男"
  65. ,"city": "浙江杭州"
  66. ,"sign": "人生恰似一场修行"
  67. ,"experience": "65"
  68. ,"ip": "192.168.0.8"
  69. ,"logins": "106"
  70. ,"joinTime": "2016-10-14"
  71. }, {
  72. "id": "10004"
  73. ,"username": "贤心"
  74. ,"email": "xianxin@layui.com"
  75. ,"sex": "男"
  76. ,"city": "浙江杭州"
  77. ,"sign": "人生恰似一场修行"
  78. ,"experience": "666"
  79. ,"ip": "192.168.0.8"
  80. ,"logins": "106"
  81. ,"joinTime": "2016-10-14"
  82. }, {
  83. "id": "10005"
  84. ,"username": "贤心"
  85. ,"email": "xianxin@layui.com"
  86. ,"sex": "男"
  87. ,"city": "浙江杭州"
  88. ,"sign": "人生恰似一场修行"
  89. ,"experience": "86"
  90. ,"ip": "192.168.0.8"
  91. ,"logins": "106"
  92. ,"joinTime": "2016-10-14"
  93. }, {
  94. "id": "10006"
  95. ,"username": "贤心"
  96. ,"email": "xianxin@layui.com"
  97. ,"sex": "男"
  98. ,"city": "浙江杭州"
  99. ,"sign": "人生恰似一场修行"
  100. ,"experience": "12"
  101. ,"ip": "192.168.0.8"
  102. ,"logins": "106"
  103. ,"joinTime": "2016-10-14"
  104. }, {
  105. "id": "10007"
  106. ,"username": "贤心"
  107. ,"email": "xianxin@layui.com"
  108. ,"sex": "男"
  109. ,"city": "浙江杭州"
  110. ,"sign": "人生恰似一场修行"
  111. ,"experience": "16"
  112. ,"ip": "192.168.0.8"
  113. ,"logins": "106"
  114. ,"joinTime": "2016-10-14"
  115. }, {
  116. "id": "10008"
  117. ,"username": "贤心"
  118. ,"email": "xianxin@layui.com"
  119. ,"sex": "男"
  120. ,"city": "浙江杭州"
  121. ,"sign": "人生恰似一场修行"
  122. ,"experience": "106"
  123. ,"ip": "192.168.0.8"
  124. ,"logins": "106"
  125. ,"joinTime": "2016-10-14"
  126. }]
  127. //,skin: 'line' //表格风格
  128. ,even: true
  129. //,page: true //是否显示分页
  130. //,limits: [5, 7, 10]
  131. //,limit: 5 //每页默认显示的数量
  132. });
  133. });
  134. </script>