test.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Test &middot; Bootstrap Table</title>
  6. <meta name="author" content="zhixin">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  9. <!--<link rel="stylesheet" href="assets/bootstrap2.3/css/bootstrap.min.css">-->
  10. <!--<link rel="stylesheet" href="assets/bootstrap2.3/css/bootstrap-responsive.min.css">-->
  11. <link rel="stylesheet" href="../src/bootstrap-table.css">
  12. </head>
  13. <body>
  14. <div class="container">
  15. <div>
  16. <label>Cells: </label><input id="cells" type="text" placeholder="Cells" value="5">
  17. <label>Rows: </label><input id="rows" type="text" placeholder="Rows" value="100">
  18. <button id="build" class="btn btn-default">Build</button>
  19. </div>
  20. <table id="table"></table>
  21. </div>
  22. <script src="assets/jquery.min.js"></script>
  23. <script src="assets/bootstrap/js/bootstrap.min.js"></script>
  24. <!--<script src="assets/bootstrap2.3/js/bootstrap.min.js"></script>-->
  25. <script src="../src/bootstrap-table.js"></script>
  26. <script>
  27. $(function () {
  28. $('#build').click(build).trigger('click');
  29. });
  30. function build() {
  31. var cells = $('#cells').val(),
  32. rows = $('#rows').val(),
  33. i, j, row,
  34. columns = [],
  35. data = [];
  36. for (i = 0; i < cells; i++) {
  37. columns.push({
  38. field: 'field' + i,
  39. title: 'Cell' + i
  40. });
  41. }
  42. for (i = 0; i < rows; i++) {
  43. row = {};
  44. for (j = 0; j < cells; j++) {
  45. row['field' + j] = 'Row-' + i + '-' + j;
  46. }
  47. data.push(row);
  48. }
  49. $('#table').bootstrapTable('destroy').bootstrapTable({
  50. height: 400,
  51. columns: columns,
  52. data: data
  53. });
  54. }
  55. </script>
  56. </body>
  57. </html>