首页 发现 帮助
登录
githab
/
bootstrap-table
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

add scroll for table and add scroll example.

zhixin 12 年之前
父节点
61fb257c43
当前提交
30440926da
共有 4 个文件被更改，包括 131 次插入 和 15 次删除
合并视图 显示文件统计
  1. 3 1
      README.md
  2. 70 0
      bootstrap-table.css
  3. 28 1
      index.html
  4. 30 13
      jquery.bootstrap.table.js

+ 3 - 1
README.md
查看文件 

@@ -4,7 +4,9 @@ Simple table for bootstrap. [Examples and documentation](http://wenzhixin.net.cn
 
 
 
 ### How to use:
 
 ### How to use:
 
 
 
-	$('#table').bootstrapTable({,
 
+	<table id="table"></table>
 
+
 
+	$('#table').bootstrapTable({
 
 		sortName: 'code',
 
 		sortName: 'code',
 
 		sortOrder: 'desc',
 
 		sortOrder: 'desc',
 
 		columns: [
 
 		columns: [

+ 70 - 0
bootstrap-table.css
查看文件 

@@ -0,0 +1,70 @@
 
+.table {
 
+	margin-bottom: 0;
 
+	border-bottom: 1px solid #dddddd;
 
+	border-collapse: separate;
 
+	*border-collapse: collapse;
 
+}
 
+
 
+.fixed-table-container {
 
+	position: relative;
 
+	padding-top: 38px;
 
+	border: 1px solid #dddddd;
 
+	border-radius: 4px;
 
+	-webkit-border-radius: 4px;
 
+	-moz-border-radius: 4px;
 
+}
 
+
 
+.fixed-table-header {
 
+	height: 37px;
 
+	position: absolute;
 
+	top: 0;
 
+	right: 0;
 
+	left: 0;
 
+	border-bottom: 1px solid #dddddd;
 
+	border-radius: 4px 4px 0 0;
 
+	-webkit-border-radius: 4px 4px 0 0;
 
+	-moz-border-radius: 4px 4px 0 0;
 
+}
 
+
 
+.fixed-table-body {
 
+	overflow-x: hidden;
 
+	overflow-y: auto;
 
+	height: 100%;
 
+}
 
+
 
+.fixed-table-body table {
 
+	width: 100%;
 
+	overflow-x: hidden;
 
+	overflow-y: auto;
 
+}
 
+
 
+.fixed-table-body thead th {
 
+	height: 0;
 
+	padding: 0;
 
+	margin: 0;
 
+	border: none;
 
+}
 
+
 
+.fixed-table-body thead th .th-inner {
 
+	position: absolute;
 
+	top: 0;
 
+	padding: 8px;
 
+	line-height: 22px;
 
+	vertical-align: top;
 
+	border-left: 1px solid #dddddd;
 
+}
 
+
 
+.fixed-table-body thead th:first-child .th-inner {
 
+	border-left: none;
 
+	border-top-left-radius: 4px;
 
+	-webkit-border-top-left-radius: 4px;
 
+	-moz-border-radius-topleft: 4px;
 
+}
 
+
 
+.fixed-table-body tbody td {
 
+	border-left: 1px solid #dddddd;
 
+}
 
+
 
+.fixed-table-body tbody td:first-child {
 
+	border-left: none;
 
+}

+ 28 - 1
index.html
查看文件 

@@ -7,6 +7,15 @@
 
     <meta name="viewport" content="width=device-width; initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width; initial-scale=1.0" />
 
     <link rel="stylesheet" href="/css/bootstrap.css" />
 
     <link rel="stylesheet" href="/css/bootstrap.css" />
 
     <link rel="stylesheet" href="/css/fork.css" />
 
     <link rel="stylesheet" href="/css/fork.css" />
 
+    <link rel="stylesheet" href="bootstrap-table.css" />
 
+    <style>
 
+      body {
 
+        margin-bottom: 50px;
 
+      }
 
+      #example {
 
+        height: 200px;
 
+      }
 
+    </style>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div class="container">
 
     <div class="container">
 
@@ -18,6 +27,8 @@
 
       <table id="event"></table>
 
       <table id="event"></table>
 
       <h3>Methods:</h3>
 
       <h3>Methods:</h3>
 
       <table id="method"></table>
 
       <table id="method"></table>
 
+      <h3>Examples:</h3>
 
+      <table id="example"></table>
 
     </div>
 
     </div>
 
     <a href="https://github.com/wenzhixin/bootstrap-table" class="fork_me"></a>
 
     <a href="https://github.com/wenzhixin/bootstrap-table" class="fork_me"></a>
 
     
     
@@ -35,7 +46,6 @@
 
           data: [
 
           data: [
 
             {name: 'sortName', type: 'String', description: 'Defines which column can be sorted.', 'default': 'undefined'},
 
             {name: 'sortName', type: 'String', description: 'Defines which column can be sorted.', 'default': 'undefined'},
 
             {name: 'sortOrder', type: 'String', description: 'Defines the column sort order, can only be "asc" or "desc".', 'default': 'asc'},
 
             {name: 'sortOrder', type: 'String', description: 'Defines the column sort order, can only be "asc" or "desc".', 'default': 'asc'},
 
-            {name: 'className', type: 'String', description: 'The table class name', 'default': 'table table-bordered table-hover'},
 
             {name: 'columns', type: 'Array', description: 'The table columns config object, see column properties for more details.', 'default': '[]'},
 
             {name: 'columns', type: 'Array', description: 'The table columns config object, see column properties for more details.', 'default': '[]'},
 
             {name: 'data', type: 'Array', description: 'The data to be loaded.', 'default': '[]'}
 
             {name: 'data', type: 'Array', description: 'The data to be loaded.', 'default': '[]'}
 
           ]
 
           ]
 
@@ -102,6 +112,23 @@
 
           field: 'parameter',
 
           field: 'parameter',
 
           rowspan: 5
 
           rowspan: 5
 
         });
 
         });
 
+        
+        var data = [];
 
+        for (var i = 100; i < 1000; i++) {
 
+          data.push({code: '' + i, name: 'hello ' + i, price: '$' + i});
 
+        }
 
+        $('#example').bootstrapTable({
 
+          sortName: 'code',
 
+          sortOrder: 'asc',
 
+          columns: [
 
+            {field: 'code', title: 'Code', align: 'left', width: 200, sortable: true},
 
+            {field: 'name', title: 'Name', align: 'center', width: 100},
 
+            {field: 'price', title: 'Price', align: 'right', valign: 'middle', width: 200, formatter: function(value, row) {
 
+              return 'the price is: ' + value;
 
+            }}
 
+          ],
 
+          data: data
 
+        });
 
       });
 
       });
 
     </script>
 
     </script>
 
     <script type="text/javascript" src="/js/analytics.js"></script>
 
     <script type="text/javascript" src="/js/analytics.js"></script>

+ 30 - 13
jquery.bootstrap.table.js
查看文件 

@@ -9,20 +9,35 @@
 
 			
 			
 	'use strict';
 
 	'use strict';
 
 
 
-	function Table($el, options) {
 
+	function Table($el) {
 
 		this.$el = $el;
 
 		this.$el = $el;
 
-		this.options = options;
 
 	}
 
 	}
 
 
 
 	Table.prototype = {
 
 	Table.prototype = {
 
 		constructor: Table,
 
 		constructor: Table,
 
 		
 		
-		init: function() {
 
-			this.$el.addClass(this.options.className);
 
+		init: function(options, first) {
 
+			if (first) {
 
+				this.$div = $([
 
+					'<div class="fixed-table-container">',
 
+						'<div class="fixed-table-header"></div>',
 
+						'<div class="fixed-table-body"></div>',
 
+					'</div>'].join(''));
 
+				this.$div.insertAfter(this.$el);
 
+				this.$div.find('.fixed-table-body').append(this.$el);
 
+				if (this.$el.height()) {
 
+					this.$div.css('height', this.$el.height() + 'px');
 
+				}
 
+				this.$el.addClass('table table-hover');
 
+			}
 
+			
+			this.options = options;
 
+			this.$el.html('');
 
 			this.$header = $('<thead></thead>');
 
 			this.$header = $('<thead></thead>');
 
 			this.$el.append(this.$header);
 
 			this.$el.append(this.$header);
 
 			this.$body = $('<tbody></tbody>');
 
 			this.$body = $('<tbody></tbody>');
 
 			this.$el.append(this.$body);
 
 			this.$el.append(this.$body);
 
+			
 			this.data = [];
 
 			this.data = [];
 
 			
 			
 			this.initHeader();
 
 			this.initHeader();
 
@@ -58,10 +73,12 @@
 
 					(column.sortable ? ' data-sortable="' + column.field + '"' : '') + 
 					(column.sortable ? ' data-sortable="' + column.field + '"' : '') + 
 					(order ? ' data-order="' + order + '"' : '') + 
 					(order ? ' data-order="' + order + '"' : '') + 
 					' style="' + style + '">');
 
 					' style="' + style + '">');
 
+				html.push('<div class="th-inner">');
 
 				html.push(column.title);
 
 				html.push(column.title);
 
 				if (that.options.sortName === column.field && column.sortable) {
 
 				if (that.options.sortName === column.field && column.sortable) {
 
 					html.push(that.getCaretHtml());
 
 					html.push(that.getCaretHtml());
 
 				}
 
 				}
 
+				html.push('</div>');
 
 				html.push('</th>');
 
 				html.push('</th>');
 
 			});
 
 			});
 
 			html.push('</tr>');
 
 			html.push('</tr>');
 
@@ -131,14 +148,14 @@
 
 			this.options.sortOrder = $this.attr('data-order') === 'asc' ? 'desc' : 'asc';
 
 			this.options.sortOrder = $this.attr('data-order') === 'asc' ? 'desc' : 'asc';
 
 			this.options.onSort(this.options.sortName, this.options.sortOrder);
 
 			this.options.onSort(this.options.sortName, this.options.sortOrder);
 
 			$this.attr('data-order', this.options.sortOrder);
 
 			$this.attr('data-order', this.options.sortOrder);
 
-			$this.append(this.getCaretHtml());
 
+			$this.find('.th-inner').append(this.getCaretHtml());
 
 			this.initSort();
 
 			this.initSort();
 
 			this.initBody();
 
 			this.initBody();
 
 		},
 
 		},
 
 		
 		
 		getCaretHtml: function() {
 
 		getCaretHtml: function() {
 
 			return ['<span class="order' + (this.options.sortOrder === 'desc' ? '' : ' dropup') + '">',
 
 			return ['<span class="order' + (this.options.sortOrder === 'desc' ? '' : ' dropup') + '">',
 
-					'<span class="caret" style="margin: 8px;"></span>',
 
+					'<span class="caret" style="margin: 10px 5px;"></span>',
 
 				'</span>'].join('');
 
 				'</span>'].join('');
 
 		},
 
 		},
 
 		
 		
@@ -189,18 +206,19 @@
 
 				data = $this.data('bootstrapTable'), 
 				data = $this.data('bootstrapTable'), 
 				options = $.extend({}, $.fn.bootstrapTable.defaults, typeof option === 'object' && option);
 
 				options = $.extend({}, $.fn.bootstrapTable.defaults, typeof option === 'object' && option);
 
 
 
-			if (!data) {
 
-				data = new Table($this, options);
 
-				$this.data('bootstrapTable', data);
 
-			}
 
-
 
 			if (typeof option === 'string') {
 
 			if (typeof option === 'string') {
 
 				if ($.inArray(option, allowedMethods) < 0) {
 
 				if ($.inArray(option, allowedMethods) < 0) {
 
 					throw "Unknown method: " + option;
 
 					throw "Unknown method: " + option;
 
 				}
 
 				}
 
 				value = data[option](args[1]);
 
 				value = data[option](args[1]);
 
 			} else {
 
 			} else {
 
-				data.init();
 
+				if (!data) {
 
+					data = new Table($this);
 
+					data.init(options, true);
 
+					$this.data('bootstrapTable', data);
 
+				} else {
 
+					data.init(options, false);
 
+				}
 
 			}
 
 			}
 
 		});
 
 		});
 
 		
 		
@@ -208,7 +226,6 @@
 
 	};
 
 	};
 
 	
 	
 	$.fn.bootstrapTable.defaults = {
 
 	$.fn.bootstrapTable.defaults = {
 
-		className: 'table table-bordered table-hover',
 
 		columns: [],
 
 		columns: [],
 
 		data: [],
 
 		data: [],
 
 		onClickRow: function(value, row) {return false;},
 
 		onClickRow: function(value, row) {return false;},