Simple example for "Group by" (wenzhixin#195)

alexschwartz · wenzhixin · commit 341243d2d0bf · 2016-12-26T17:45:23.000-06:00
* starting with copied files for 'group-by' example

* added continent+country

* added the group-by extension

* succeeded with the first group by country

* switched to other examples

* renaming examle to clarify it is covering group-by-v2 rather than group-by
diff --git a/extensions/group-by-v2.html b/extensions/group-by-v2.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Editable</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
+    <link rel="stylesheet" href="../assets/bootstrap-table/src/extensions/group-by-v2/bootstrap-table-group-by.css">
+    <link rel="stylesheet" href="../assets/examples.css">
+    <script src="../assets/jquery.min.js"></script>
+    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
+    <script src="../assets/bootstrap-table/src/extensions/group-by-v2/bootstrap-table-group-by.js"></script>
+    <script src="../ga.js"></script>
+</head>
+<body>
+    <div class="container">
+        <h1>Group By v2</h1>
+        <table id="table"
+               data-toggle="table"
+               data-group-by="true"
+               data-group-by-field="shape"
+               data-url="../json/data6.json">
+            <thead>
+            <tr>
+                <th data-field="shape">Shape</th>
+                <th data-field="color">Color</th>
+                <th data-field="area">Area</th>
+            </tr>
+            </thead>
+        </table>
+    </div>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -98,6 +98,7 @@
                         <li><a href="extensions/export.html">Export</a></li>
                         <li><a href="extensions/flat-json.html">Flat Json</a></li>
                         <li><a href="extensions/cookie.html">Cookie</a></li>
+                        <li><a href="extensions/group-by-v2.html">Group By v2</a></li>
                         <li><a href="extensions/resizable.html">Resizable</a></li>
                         <li><a href="extensions/key-events.html">Key Events</a></li>
                         <li><a href="extensions/mobile.html">Mobile</a></li>
diff --git a/index.html.conf b/index.html.conf
@@ -98,6 +98,7 @@
                         <li><a href="extensions/export.html">Export</a></li>
                         <li><a href="extensions/flat-json.html">Flat Json</a></li>
                         <li><a href="extensions/cookie.html">Cookie</a></li>
+                        <li><a href="extensions/group-by-v2.html">Group By v2</a></li>
                         <li><a href="extensions/resizable.html">Resizable</a></li>
                         <li><a href="extensions/key-events.html">Key Events</a></li>
                         <li><a href="extensions/mobile.html">Mobile</a></li>
diff --git a/json/data6.json b/json/data6.json
@@ -0,0 +1,50 @@
+[
+    {
+        "shape": "triangle",
+        "color": "red",
+        "area": 5,
+        "label": "T1"
+    },
+    {
+        "shape": "triangle",
+        "color": "green",
+        "area": 27,
+        "label": "T2"
+    },
+    {
+        "shape": "triangle",
+        "color": "yellow",
+        "area": 15,
+        "label": "T3"
+    },
+    {
+        "shape": "triangle",
+        "color": "red",
+        "area": 10,
+        "label": "T4"
+    },
+    {
+        "shape": "quadrangle",
+        "color": "red",
+        "area": 25,
+        "label": "Q1"
+    },
+    {
+        "shape": "quadrangle",
+        "color": "red",
+        "area": 44,
+        "label": "Q2"
+    },
+    {
+        "shape": "circle",
+        "color": "red",
+        "area": 44,
+        "label": "Q2"
+    },
+    {
+        "shape": "circle",
+        "color": "black",
+        "area": 44,
+        "label": "Q2"
+    }
+]
