bootstrap-table-group-by header formatter (#4109)

* bootstrap-table-group-by header formatter

An additional option for bootstrap-table-group-by to allow formatting of group headers.
Option is in the form of a function with the signature groupByFormatter(value, idx, data) where:
value: is the original header text
idx: is the index of the group
data: is an array of the row objects for this group
return: a string to be used as the group header html

This is useful when you require the group header to be formatted differently from the field value.

* Fixed Formatting

Remove spaces

* Add groupByFormatter docs

* Tidy up group by doc

site/docs/extensions/group-by-v2.md

@@ -10,10 +10,9 @@ Use Plugin: [bootstrap-table-group-by-v2](https://github.com/wenzhixin/bootstrap
 You must include the bootstrap-table-group-by.css file in order to get the appropriate style
 
 ## Usage
-
-{% highlight html %}
+```
 <script src="extensions/group-by-v2/bootstrap-table-group-by.js"></script>
-{% endhighlight %}
+```
 
 ## Options
 
@@ -36,3 +35,17 @@ You must include the bootstrap-table-group-by.css file in order to get the appro
    Set the fields name that you want to group the data.
 
 - **Default:** `''`
+
+### groupByFormatter
+
+- **type:** `Function`
+
+- **Detail:**
+
+   The group row formatter function, takes three parameters:
+
+   * `value`: the group by value.
+   * `idx`: the index of the group.
+   * `data`: an array of rows in the group.
+
+- **Default:** `Undefined`

src/extensions/group-by-v2/bootstrap-table-group-by.js

@@ -1,9 +1,9 @@
 /**
  * @author: Yura Knoxville
- * @version: v1.0.0
+ * @version: v1.1.0
  */
 
-!function ($) {
+(function ($) {
 
     'use strict';
 
@@ -27,7 +27,7 @@
         });
         return flag ? str : '';
     };
-
+    
     var groupBy = function (array , f) {
         var groups = {};
         array.forEach(function(o) {
@@ -41,7 +41,8 @@
 
     $.extend($.fn.bootstrapTable.defaults, {
         groupBy: false,
-        groupByField: ''
+        groupByField: '',
+        groupByFormatter: undefined
     });
 
     var BootstrapTable = $.fn.bootstrapTable.Constructor,
@@ -72,7 +73,8 @@
             $.each(groups, function(key, value) {
                 tableGroups.push({
                     id: index,
-                    name: key
+                    name: key,
+                    data: value
                 });
 
                 value.forEach(function(item) {
@@ -127,10 +129,13 @@
                         '</td>'
                     );
                 }
-
+                var formattedValue = item.name;
+                if (typeof(that.options.groupByFormatter) == "function") {
+                    formattedValue = that.options.groupByFormatter(item.name, item.id, item.data);
+                }
                 html.push('<td',
                     sprintf(' colspan="%s"', visibleColumns),
-                    '>', item.name, '</td>'
+                    '>', formattedValue, '</td>'
                 );
 
                 html.push('</tr>');
@@ -214,7 +219,6 @@
 
         this.$selectItem.filter(filter).prop('checked', checked);
 
-
         this.updateRows();
         this.updateSelected();
         if (checked) {
@@ -223,4 +227,4 @@
         this.trigger(checked ? 'check-all' : 'uncheck-all', rows);
     };
 
-}(jQuery);
+})(jQuery);