ホーム エクスプローラ ヘルプ
サインイン
githab
/
bootstrap-table
2
0
Fork 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

first commit

zhixin 12 年 前
コミット
4a037519e6
3 ファイル変更、218 行追加、0 行削除
一括表示 差分情報を表示
  1. 33 0
      README.md
  2. 116 0
      bootstrap-table.js
  3. 69 0
      index.html

+ 33 - 0
README.md
ファイルの表示 

@@ -0,0 +1,33 @@
 
+## bootstrap table
 
+
 
+Simple table for bootstrap. [Examples and documentation](http://wenzhixin.net.cn/p/bootstrap-table/)
 
+
 
+### How to use:
 
+
 
+	$('#table').bootstrapTable({
 
+		columns: [
 
+			{field: 'code', title: 'Code', align: 'left', width: 200},
 
+			{field: 'name', title: 'Name', align: 'center', width: 100},
 
+			{field: 'price', title: 'Price', align: 'right', width: 200, formatter: function(value, row) {
 
+				return 'the price is: ' + value;
 
+			}}
 
+		],
 
+		data: [
 
+			{code: '123', name: 'hello 123', price: '$123'},
 
+			{code: '222', name: 'hello 222', price: '$222'},
 
+			{code: '321', name: 'hello 321', price: '$321'}
 
+		]
 
+	});
 
+	
+	$('#table').bootstrapTable('load', [
 
+		{code: '123', name: 'hello 123', price: '$123'},
 
+		{code: '222', name: 'hello 222', price: '$222'},
 
+		{code: '321', name: 'hello 321', price: '$321'}
 
+	]);
 
+	
+	$('#table').bootstrapTable('append', [
 
+		{code: '123', name: 'hello 123', price: '$123'},
 
+		{code: '222', name: 'hello 222', price: '$222'},
 
+		{code: '321', name: 'hello 321', price: '$321'}
 
+	]);
 
+

+ 116 - 0
bootstrap-table.js
ファイルの表示 

@@ -0,0 +1,116 @@
 
+/**
 
+ * @author zhixin wen <wenzhixin2010@gmail.com>
 
+ * @version 0.0.1
 
+ * @github https://github.com/wenzhixin/bootstrap-table
 
+ * @blog http://wenzhixin.net.cn
 
+ */
 
+
 
+(function($) {
 
+			
+	'use strict';
 
+
 
+	function Table($el, options) {
 
+		this.$el = $el;
 
+		this.options = options;
 
+	}
 
+
 
+	Table.prototype = {
 
+		constructor: Table,
 
+		
+		init: function() {
 
+			this.$el.addClass(this.options.class);
 
+			this.$header = $('<thead></thead>');
 
+			this.$el.append(this.$header);
 
+			this.$body = $('<tbody></tbody>');
 
+			this.$el.append(this.$body);
 
+			
+			this.initHeader();
 
+			this.initBody();
 
+		},
 
+		
+		initHeader: function() {
 
+			var that = this,
 
+				html = ['<tr>'];
 
+			
+			this.header = {
 
+				fields: [],
 
+				styles: [],
 
+				formatters: []
 
+			};
 
+			$.each(this.options.columns, function(i, column) {
 
+				var style = column.align ? 'text-align: ' + column.align + '; ': '';
 
+				style += column.width ? 'width: ' + column.width + 'px; ': '';
 
+				
+				that.header.fields.push(column.field);
 
+				that.header.styles.push(style);
 
+				that.header.formatters.push(column.formatter);
 
+				
+				html.push('<th style="' + style + '">' + column.title + '</th>');
 
+			});
 
+			html.push('</tr>');
 
+			this.$header.html(html.join(''));
 
+		},
 
+		
+		initBody: function(data, append) {
 
+			var that = this,
 
+				html = [];
 
+				
+			$.each(data || this.options.data, function(i, item) {
 
+				html.push('<tr>');
 
+				$.each(that.header.fields, function(j, field) {
 
+					var value = item[field];
 
+					if (typeof that.header.formatters[j] === 'function') {
 
+						value = that.header.formatters[j](value, item);
 
+					}
 
+					html.push('<td style="' + that.header.styles[j] + '">' + value + '</td>');
 
+				});
 
+				html.push('</tr>');
 
+			});
 
+			this.$body[append ? 'append' : 'html'](html.join(''));
 
+		},
 
+		
+		load: function(data) {
 
+			this.initBody(data);
 
+		},
 
+		
+		append: function(data) {
 
+			this.initBody(data, true);
 
+		}
 
+	};
 
+
 
+	$.fn.bootstrapTable = function() {
 
+		var option = arguments[0], 
+			args = arguments,
 
+			
+			value, 
+			allowedMethods = ['load', 'append'];
 
+
 
+		this.each(function() {
 
+			var $this = $(this), 
+				data = $this.data('bootstrapTable'), 
+				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 ($.inArray(option, allowedMethods) < 0) {
 
+					throw "Unknown method: " + option;
 
+				}
 
+				value = data[option](args[1]);
 
+			} else {
 
+				data.init();
 
+			}
 
+		});
 
+		
+		return value ? value : this;
 
+	};
 
+	
+	$.fn.bootstrapTable.defaults = {
 
+		class: 'table table-striped table-bordered',
 
+		columns: [],
 
+		data: []
 
+	};
 
+})(jQuery);

+ 69 - 0
index.html
ファイルの表示 

@@ -0,0 +1,69 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
+    <title>bootstrap-table demo</title>
 
+    <meta name="author" content="zhixin" />
 
+    <link rel="stylesheet" href="/css/bootstrap.css" />
 
+    <link rel="stylesheet" href="/css/fork.css" />
 
+  </head>
 
+  <body>
 
+    <div class="container">
 
+      <h3>Table Properties:</h3>
 
+      <table id="table"></table>
 
+      <h3>Column Properties:</h3>
 
+      <table id="column"></table>
 
+      <h3>Methods:</h3>
 
+      <table id="method"></table>
 
+    </div>
 
+    <a href="https://github.com/wenzhixin/bootstrap-table" class="fork_me"></a>
 
+    
+    <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
 
+    <script type="text/javascript" src="bootstrap-table.js"></script>
 
+    <script type="text/javascript">
 
+      $(function() {
 
+        $('#table').bootstrapTable({
 
+          columns: [
 
+            {field: 'name', title: 'Name', align: 'center', width: 60},
 
+            {field: 'type', title: 'Type', align: 'center', width: 60},
 
+            {field: 'description', title: 'Description', width: 400},
 
+            {field: 'default', title: 'Default', align: 'right', width: 180}
 
+          ],
 
+          data: [
 
+            {name: 'class', type: 'String', description: 'The table class', default: 'table table-striped table-bordered'},
 
+            {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: '[]'}
 
+          ]
 
+        });
 
+        $('#column').bootstrapTable({
 
+          columns: [
 
+            {field: 'name', title: 'Name', align: 'center', width: 60},
 
+            {field: 'type', title: 'Type', align: 'center', width: 60},
 
+            {field: 'description', title: 'Description', width: 400},
 
+            {field: 'default', title: 'Default', align: 'right', width: 180}
 
+          ],
 
+          data: [
 
+            {name: 'field', type: 'String', description: 'The column field name.', default: 'undefined'},
 
+            {name: 'title', type: 'String', description: 'The column title text.', default: 'undefined'},
 
+            {name: 'align', type: 'String', description: 'Indicate how to align the column data. "left", "right", "center" can be used.', default: 'undefined'},
 
+            {name: 'width', type: 'Number', description: 'The width of column. If not defined, the width will auto expand to fit its contents.', default: 'undefined'},
 
+            {name: 'formatter', type: 'Function', description: 'The cell formatter function, take three parameters: <br />value: the field value. <br />rowData: the row record data.', default: 'undefined'}
 
+          ]
 
+        });
 
+        $('#method').bootstrapTable({
 
+          columns: [
 
+            {field: 'name', title: 'Name', align: 'center', width: 100},
 
+            {field: 'parameter', title: 'Parameter', align: 'center', width: 100},
 
+            {field: 'description', title: 'Description', width: 400}
 
+          ],
 
+          data: [
 
+            {name: 'load', parameter: 'data', description: 'Load the data to table.'},
 
+            {name: 'append', parameter: 'data', description: 'Append the data to table.'}
 
+          ]
 
+        });
 
+      });
 
+    </script>
 
+    <script type="text/javascript" src="/js/analytics.js"></script>
 
+  </body>
 
+</html>