add mergeCells method.

README.md

@@ -4,11 +4,15 @@ Simple table for bootstrap. [Examples and documentation](http://wenzhixin.net.cn
 
 ### How to use:
 
-	$('#table').bootstrapTable({
+	$('#table').bootstrapTable({,
+		sortName: 'code',
+		sortOrder: 'desc',
 		columns: [
-			{field: 'code', title: 'Code', align: 'left', width: 200},
+			{field: 'code', title: 'Code', align: 'left', width: 200, sortable: true, sorter: function(a, b) {
+				return a < b;
+			}},
 			{field: 'name', title: 'Name', align: 'center', width: 100},
-			{field: 'price', title: 'Price', align: 'right', width: 200, formatter: function(value, row) {
+			{field: 'price', title: 'Price', align: 'right', valign: 'middle', width: 200, formatter: function(value, row) {
 				return 'the price is: ' + value;
 			}}
 		],
@@ -30,4 +34,11 @@ Simple table for bootstrap. [Examples and documentation](http://wenzhixin.net.cn
 		{code: '222', name: 'hello 222', price: '$222'},
 		{code: '321', name: 'hello 321', price: '$321'}
 	]);
+	
+	$('#table').bootstrapTable('mergeCells', {
+		index: 1,
+		field: 'code',
+		rowspan: 2,
+		colspan: 2
+	});
 	

index.html

@@ -80,15 +80,28 @@
         });
         $('#method').bootstrapTable({
           columns: [
-            {field: 'name', title: 'Name', align: 'center', width: 100},
-            {field: 'parameter', title: 'Parameter', align: 'center', width: 100},
+            {field: 'name', title: 'Name', align: 'center', valign: 'middle', width: 100},
+            {field: 'parameter', title: 'Parameter', align: 'center', valign: 'middle', width: 100},
             {field: 'description', title: 'Description', width: 400}
           ]
         }).bootstrapTable('load', [
           {name: 'load', parameter: 'data', description: 'Load the data to table.'}
         ]).bootstrapTable('append', [
-          {name: 'append', parameter: 'data', description: 'Append the data to table.'}
-        ]);
+          {name: 'append', parameter: 'data', description: 'Append the data to table.'},
+          {name: 'mergeCells', parameter: 'options', description: 'Merge some cells to one cell, the options contains following properties:'},
+          {name: 'mergeCells', parameter: 'options', description: 'index: the row index.'},
+          {name: 'mergeCells', parameter: 'options', description: 'field: the field name.'},
+          {name: 'mergeCells', parameter: 'options', description: 'rowspan: the rowspan count to be merged.'},
+          {name: 'mergeCells', parameter: 'options', description: 'colspan: the colspan count to be merged.'}
+        ]).bootstrapTable('mergeCells', {
+          index: 2, 
+          field: 'name',
+          rowspan: 5
+        }).bootstrapTable('mergeCells', {
+          index: 2, 
+          field: 'parameter',
+          rowspan: 5
+        });
       });
     </script>
     <script type="text/javascript" src="/js/analytics.js"></script>

jquery.bootstrap.table.js

@@ -152,6 +152,28 @@
 		append: function(data) {
 			this.initData(data, true);
 			this.initBody();
+		},
+		
+		mergeCells: function(options) {
+			var row = options.index,
+				col = $.inArray(options.field, this.header.fields),
+				rowspan = options.rowspan || 1,
+				colspan = options.colspan || 1,
+				i, j,
+				$tr = this.$body.find('tr'),
+				$td = $tr.eq(row).find('td').eq(col);
+				
+			if (row < 0 || col < 0 || row >= this.data.length) {
+				return;
+			}
+			
+			for (i = row; i < row + rowspan; i++) {
+				for (j = col; j < col + colspan; j++) {
+					$tr.eq(i).find('td').eq(j).hide();
+				}
+			}
+				
+			$td.attr('rowspan', rowspan).attr('colspan', colspan).show();
 		}
 	};
 
@@ -160,7 +182,7 @@
 			args = arguments,
 			
 			value, 
-			allowedMethods = ['load', 'append'];
+			allowedMethods = ['load', 'append', 'mergeCells'];
 
 		this.each(function() {
 			var $this = $(this),