diff --git a/index.html b/index.html index 2506c90..7030495 100644 --- a/index.html +++ b/index.html @@ -1,443 +1,444 @@ - - - - - - Grid Iron - - - - - - - - - - - - - - - - - - - -

GridIron

-
-
-
-

Overview

-
- The JQuery plugin lets you map a CouchDb view to a html grid. That's it. I looked at the other JQuery grid plug-in - many of which a really great - I could'nt get them working and since I'm lazy. - So here are its features: -
    -
  • HTML agnostic you can use tables or divs or any HTML to layout your data. -
  • View JSON data from any source - such as CouchDB. -
  • Column sorting. -
  • Paging -
  • Compatible iwth JEditable. So you can edit your data creating new versions or inplace. -
  • Really small - Currently under 3K. -
  • Coded in a clean fasion so you can subclass header/body or footer generation and the loading and saving of data. -
-
-
-
-

A Quick Guide with HTML Tables

- -
    - -
  1. -

    Before I Embark...

    - Before I embark in trying to explain how to use this plug-in, I'm going to explain the JSON datastructure that it expects by default. - As an example I will use a real database of more than 40K electric power usages records. Here is one of its documents: - 
    -           {_id: "4da96f65dfecf6edd329269c3799de60", 
-            _rev: "1-3a49c260576c26c758742c8842d5b9ca", 
-            loadAvgHourlyNI: 8404.7, 
-            hourEnd: 1, 
-            loadAvgHourlyDUQ: 1263.2, 
-            loadAvgHourlyDAY: 1392.2, 
-            loadAvgHourlyMIDATL: 22126.6, 
-            loadAvgHourlyDOM: 7162.4, 
-            loadAvgHourlyAEP: 10855.8, 
-            loadAvgHourlyAP: 3834.5, 
-            date: "2010-04-05", 
-                id: "pjm-20100405-01"}
-
    - - I'll start with using this view: - - 
    -            {
-                "_id": "_design/tests",
-                "_rev": "2-9712dcb1e76a5cc7ab0e0e0b5bf7a70a",
-                "language": "javascript",
-                "views": {
-                    "id": {
-                        "map": "function(doc) {\n  emit(doc.id, doc);\n}"
-                    }
-                }
-            }
-
    - - So http://69.164.211.38:8080/mydb/_design/tests/_view/id?limit=2 - will give you: - 
    -           {
-            "total_rows":24,
-            "offset":0,
-            "rows":[
-                        {
-                            "id":"4da96f65dfecf6edd329269c3799de60",
-                            "key":"pjm-20100405-01",
-                            "value":{"_id":"4da96f65dfecf6edd329269c3799de60","_rev":"1-3a49c260576c26c758742c8842d5b9ca","loadAvgHourlyNI":8404.7,"hourEnd":1,"loadAvgHourlyDUQ":1263.2,"loadAvgHourlyDAY":1392.2,"loadAvgHourlyMIDATL":22126.6,"loadAvgHourlyDOM":7162.4,"loadAvgHourlyAEP":10855.8,"loadAvgHourlyAP":3834.5,"date":"2010-04-05","id":"pjm-20100405-01"}
-                        },
-                        {"id":"6339d2c104c222a31872ac400f2a5bb9","key":"pjm-20100405-02","value":{"_id":"6339d2c104c222a31872ac400f2a5bb9","_rev":"1-0e0e84e6485fd61bf830cd01df406393","loadAvgHourlyNI":8011.1,"hourEnd":2,"loadAvgHourlyDUQ":1242.6,"loadAvgHourlyDAY":1347.6,"loadAvgHourlyMIDATL":21215.9,"loadAvgHourlyDOM":6819,"loadAvgHourlyAEP":10485.4,"loadAvgHourlyAP":3808,"date":"2010-04-05","id":"pjm-20100405-02"}}
-                    ]
-                }
-
    -
    2. -
  2. -

    What to Include

    - Include jquery in your HTML header. You can use googleapis for this. Then add jquery.couchview.js. - 
    -                        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
-                        <script type="text/javascript" src="jquery.couchview.js"></script>
-
    -
    3. - - - -
  3. -

    Creating your Template

    - - Code an example table with one row of dummy data: - -
    - 
    -                     <table id="table-1" bgcolor="gray">
-                 <tbody>
-                  <tr  bgcolor="lightgray">
-                        <th>Id</th>
-                        <th>Date</th>
-                        <th>Hour</th>
-                        <th>Load</th>
-                  </tr>
-                  <tr  bgcolor="white" class="data-row">
-                      <td>pjm-20100405-24</td>
-                      <td>05/04/2010</td>
-                      <td>24</td>
-                      <td>1686.4</td>
-                  </tr>
-                  </tbody>
-                </table>
-
    -
    - - - - - - - - - -
    IdDateHourLoad
    test_id05/04/2010241686.4
    -
    -
    4. - - - -
  4. -

    Apply the plugin

    - Apply the plugin to a class that you will use for your test grid. In these examples I will use 'grid-test'. For options i've set the url to our database's view design document, the view and a page size of 4 lines. - 
    -            <html lang="en">
-                <head>
-                    <title>Couch View</title>
-                    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
-                    <script type="text/javascript"  src="jquery.couchview.js"></script>
-                    <script>
-                        $(document).ready(function() {
-                            $(".grid-test").couchview({
-                            url: "http://69.164.211.38:8080/mydb/_design/tests/_view/",
-                            limit: 4,
-                            view:'id'
-                            });
-                        });
-                    </script>
-                </head>
-
    -
    5. - -

  5. Enliven your Table

    -
      -
    1. Add to the parent container, in this case table, the class 'grid-test', give it also an id. - 
      -                    <table id="table-1" bgcolor="gray"   class="grid-test" >
-
      -
      2. -
    2. - Now add to each data cell, in this case the table's TD element the class 'field' and a id attribute set to teh name of a field form the document: - In this example we will want to show only id, date, hour, and loadAvgHourlyDAY. - 
      -<table id="example-1" bgcolor="gray" class="grid-test">
-    <tbody class="data-body">
-        <tr  bgcolor="lightgray" class="header-row">
-            <th>Id</th>
-            <th>Date</th>
-            <th>Hour</th>
-            <th>Load</th>
-        </tr>
-        <tr  bgcolor="white" class="data-row">
-            <td class="field" id="id">pjm-20100405-24</td>
-            <td class="field" id="date">05/04/2010</td>
-            <td class="field" id="hourEnd" >24</td>
-            <td class="field" id="loadAvgHourlyDAY">1686.4</td>
-        </tr>
-    </tbody>
-</table>
-
      - - - - - - - - - - - - - - - -
      IdDateHourLoad
      pjm-20100405-2405/04/2010241686.4
      -
      3. -
    -

  6. Add a Pager

    - Now we will add the pager. Here are the relevant classes: - - - - - - - - - Creates a clickable element that requests the next page data - -
    classUse
    pager-firstCreates a clickable element that requests the first page data
    pager-prev-pageCreates a clickable element that requests the previous page data
    pager-prevCreates a clickable element that requests data from the previous record
    pager-pageThe element's inner html is replaced with the current page number
    pager-page-totalThe element's inner html is replaced with the number of pages in total
    pager-nextCreates a clickable element that requests data from the next record
    pager-next-page
    pager-lastCreates a clickable element that requests the last page data
    - In this example we won't use all of them. It sould be obvoius that the pager can be anywhere within the container whose class is (in this example) 'grid-test'. - We will use a subset of these classes, and append the following row to our example table: - 
    -<tr  bgcolor="white">
-    <th class="pager-first">first</th>
-    <th class="pager-prev-page">prev</th>
-    <th class="pager-page">page</th>
-    <th class="pager-next" >next</th>
-    <th class="pager-last">last</th>
-</tr>
-
    - So we get: - - - - - - - - - - - - - - - - - - - - - -
    IdDateHourLoad
    pjm-20100405-2405/04/2010241686.4
    prev pagepagenext
    - -
    7. - -

  7. Add Sorting

    - Next is to add some sorting. The way I do is to have a different view for each sort. It sounds terriable but it's really quite clean: - - 
    -{
-   "_id": "_design/tests",
-   "_rev": "7-33b9ed5cb7a82e86d440f83f00cd341e",
-   "language": "javascript",
-   "views": {
-
-       "id": {
-           "map": "function(doc) {\n  emit(doc.id, doc);\n}"
-       },
-       "date": {
-           "map": "function(doc) {\n  emit(doc.date, doc);\n}"
-       },
-       "hourEnd": {
-           "map": "function(doc) {\n  emit(doc.hourEnd, doc);\n}"
-       },
-       "loadAvgHourlyDAY": {
-           "map": "function(doc) {\n  emit(doc.loadAvgHourlyDAY, doc);\n}"
-       }
-   }
-}
-
    - Now added a 'data-sort' class to the column header elements, in this case the TH tags. Also add an 'id' attribute to each column header setting it to the name of the view. - 
    - <table id="example-3" bgcolor="gray" class="grid-test">
-        <tbody class="data-body">
-            <tr  bgcolor="lightgray" class="header-row">
-                <th id="id" class="data-sort" >Id</th>
-                <th id="date" class="data-sort" >Date</th>
-                <th id="hourEnd" class="data-sort" >Hour</th>
-                <th id="loadAvgHourlyDAY" class="data-sort" >Load</th>
-            </tr>
-            <tr  bgcolor="white" class="data-row">
-                <td class="field" id="id">pjm-20100405-24</td>
-                <td class="field" id="date">05/04/2010</td>
-                <td class="field" id="hourEnd" >24</td>
-                <td class="field" id="loadAvgHourlyDAY">1686.4</td>
-            </tr>
-        </tbody>
-        <tr  bgcolor="white">
-            <th class="pager-prev-page">prev page</th>
-            <th class="pager-page">page</th>
-            <th class="pager-next"colspan="2">next</th>
-        </tr>
-    </table>
-
-
    - - - - - - - - - - - - - - - - - - - - - -
    IdDateHourLoad
    pjm-20100405-2405/04/2010241686.4
    prev pagepagenext
    - - That was easy, right ? -
    8. - - - -

  8. Make it Editable

    - Right, now you want your table editable. The easiest way, for now, is to use the editable plugin, http://www.appelsiini.net/projects/jeditable. - Add it to your header: - 
    -<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
-<script type="text/javascript" src="jquery.jeditable.js"></script>
-<script type="text/javascript"  src="jquery.couchview.js"></script>
-
    - Then added 'edit' to the class of the data columns you want editable. For this example we will make just 'Load' editable. - - - 
    -<tr  bgcolor="white" class="data-row">
-    <td class="field" id="id">pjm-20100405-24</td>
-    <td class="field" id="date">05/04/2010</td>
-    <td class="field" id="hourEnd" >24</td>
-    <td class="field edit" id="loadAvgHourlyDAY">1686.4</td>
-</tr>
-
    - - - - - - - - - - - - - - - - - - - - - -
    IdDateHourLoad
    pjm-20100405-2405/04/2010241686.4
    prev pagepagenext
    - - There you are.
    9. -
- - -
-
-

Classes

- - - - - - - - - Creates a clickable element that requests the next page data - -
classUse
pager-firstCreates a clickable element that requests the first page data
pager-prev-pageCreates a clickable element that requests the previous page data
pager-prevCreates a clickable element that requests data from the previous record
pager-pageThe element's inner html is replaced with the current page number
pager-page-totalThe element's inner html is replaced with the number of pages in total
pager-nextCreates a clickable element that requests data from the next record
pager-next-page
pager-lastCreates a clickable element that requests the last page data
-
- -
-

Options

- - - - - -
classUse
urlCreates a clickable element that requests the first page data
limitCreates a clickable element that requests the previous page data
default_viewCreates a clickable element that requests data from the previous record
-
-
- - - - - - -
- - - + + + + + + Grid Iron + + + + + + + + + + + + + + + + + + + +

GridIron

+
+
+
+

Overview

+
+ The JQuery plugin lets you map a CouchDb view to a html grid. That's it. I looked at the other JQuery grid plug-in - many of which a really great - I could'nt get them working and since I'm lazy. + So here are its features: +
    +
  • HTML agnostic you can use tables or divs or any HTML to layout your data. +
  • View JSON data from any source - such as CouchDB. +
  • Column sorting. +
  • Paging +
  • Compatible iwth JEditable. So you can edit your data creating new versions or inplace. +
  • Really small - Currently under 3K. +
  • Coded in a clean fasion so you can subclass header/body or footer generation and the loading and saving of data. +
+
+
+
+

A Quick Guide with HTML Tables

+ +
    + +
  1. +

    Before I Embark...

    + Before I embark in trying to explain how to use this plug-in, I'm going to explain the JSON datastructure that it expects by default. + As an example I will use a real database of more than 40K electric power usages records. Here is one of its documents: + 
    +           {_id: "4da96f65dfecf6edd329269c3799de60", 
+            _rev: "1-3a49c260576c26c758742c8842d5b9ca", 
+            loadAvgHourlyNI: 8404.7, 
+            hourEnd: 1, 
+            loadAvgHourlyDUQ: 1263.2, 
+            loadAvgHourlyDAY: 1392.2, 
+            loadAvgHourlyMIDATL: 22126.6, 
+            loadAvgHourlyDOM: 7162.4, 
+            loadAvgHourlyAEP: 10855.8, 
+            loadAvgHourlyAP: 3834.5, 
+            date: "2010-04-05", 
+                id: "pjm-20100405-01"}
+
    + + I'll start with using this view: + + 
    +            {
+                "_id": "_design/tests",
+                "_rev": "2-9712dcb1e76a5cc7ab0e0e0b5bf7a70a",
+                "language": "javascript",
+                "views": {
+                    "id": {
+                        "map": "function(doc) {\n  emit(doc.id, doc);\n}"
+                    }
+                }
+            }
+
    + + So http://69.164.211.38:8080/mydb/_design/tests/_view/id?limit=2 + will give you: + 
    +           {
+            "total_rows":24,
+            "offset":0,
+            "rows":[
+                        {
+                            "id":"4da96f65dfecf6edd329269c3799de60",
+                            "key":"pjm-20100405-01",
+                            "value":{"_id":"4da96f65dfecf6edd329269c3799de60","_rev":"1-3a49c260576c26c758742c8842d5b9ca","loadAvgHourlyNI":8404.7,"hourEnd":1,"loadAvgHourlyDUQ":1263.2,"loadAvgHourlyDAY":1392.2,"loadAvgHourlyMIDATL":22126.6,"loadAvgHourlyDOM":7162.4,"loadAvgHourlyAEP":10855.8,"loadAvgHourlyAP":3834.5,"date":"2010-04-05","id":"pjm-20100405-01"}
+                        },
+                        {"id":"6339d2c104c222a31872ac400f2a5bb9","key":"pjm-20100405-02","value":{"_id":"6339d2c104c222a31872ac400f2a5bb9","_rev":"1-0e0e84e6485fd61bf830cd01df406393","loadAvgHourlyNI":8011.1,"hourEnd":2,"loadAvgHourlyDUQ":1242.6,"loadAvgHourlyDAY":1347.6,"loadAvgHourlyMIDATL":21215.9,"loadAvgHourlyDOM":6819,"loadAvgHourlyAEP":10485.4,"loadAvgHourlyAP":3808,"date":"2010-04-05","id":"pjm-20100405-02"}}
+                    ]
+                }
+
    +
    2. +
  2. +

    What to Include

    + Include jquery in your HTML header. You can use googleapis for this. Then add jquery.couchview.js. + 
    +                        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+                        <script type="text/javascript" src="jquery.couchview.js"></script>
+
    +
    3. + + + +
  3. +

    Creating your Template

    + + Code an example table with one row of dummy data: + +
    + 
    +                     <table id="table-1" bgcolor="gray">
+                 <tbody>
+                  <tr  bgcolor="lightgray">
+                        <th>Id</th>
+                        <th>Date</th>
+                        <th>Hour</th>
+                        <th>Load</th>
+                  </tr>
+                  <tr  bgcolor="white" class="data-row">
+                      <td>pjm-20100405-24</td>
+                      <td>05/04/2010</td>
+                      <td>24</td>
+                      <td>1686.4</td>
+                  </tr>
+                  </tbody>
+                </table>
+
    +
    + + + + + + + + + +
    IdDateHourLoad
    test_id05/04/2010241686.4
    +
    +
    4. + + + +
  4. +

    Apply the plugin

    + Apply the plugin to a class that you will use for your test grid. In these examples I will use 'grid-test'. For options i've set the url to our database's view design document, the view and a page size of 4 lines. + 
    +            <html lang="en">
+                <head>
+                    <title>Couch View</title>
+                    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+                    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+                    <script type="text/javascript"  src="jquery.couchview.js"></script>
+                    <script>
+                        $(document).ready(function() {
+                            $(".grid-test").couchview({
+                            url: "http://69.164.211.38:8080/mydb/_design/tests/_view/",
+                            limit: 4,
+                            view:'id'
+                            });
+                        });
+                    </script>
+                </head>
+
    +
    5. + +

  5. Enliven your Table

    +
      +
    1. Add to the parent container, in this case table, the class 'grid-test', give it also an id. + 
      +                    <table id="table-1" bgcolor="gray"   class="grid-test" >
+
      +
      2. +
    2. + Now add to each data cell, in this case the table's TD element the class 'field' and a id attribute set to teh name of a field form the document: + In this example we will want to show only id, date, hour, and loadAvgHourlyDAY. + 
      +<table id="example-1" bgcolor="gray" class="grid-test">
+    <tbody class="data-body">
+        <tr  bgcolor="lightgray" class="header-row">
+            <th>Id</th>
+            <th>Date</th>
+            <th>Hour</th>
+            <th>Load</th>
+        </tr>
+        <tr  bgcolor="white" class="data-row">
+            <td class="field" id="id">pjm-20100405-24</td>
+            <td class="field" id="date">05/04/2010</td>
+            <td class="field" id="hourEnd" >24</td>
+            <td class="field" id="loadAvgHourlyDAY">1686.4</td>
+        </tr>
+    </tbody>
+</table>
+
      + + + + + + + + + + + + + + + +
      IdDateHourLoad
      pjm-20100405-2405/04/2010241686.4
      +
      3. +
    +

  6. Add a Pager

    + Now we will add the pager. Here are the relevant classes: + + + + + + + + + Creates a clickable element that requests the next page data + +
    classUse
    pager-firstCreates a clickable element that requests the first page data
    pager-prev-pageCreates a clickable element that requests the previous page data
    pager-prevCreates a clickable element that requests data from the previous record
    pager-pageThe element's inner html is replaced with the current page number
    pager-page-totalThe element's inner html is replaced with the number of pages in total
    pager-nextCreates a clickable element that requests data from the next record
    pager-next-page
    pager-lastCreates a clickable element that requests the last page data
    + In this example we won't use all of them. It sould be obvoius that the pager can be anywhere within the container whose class is (in this example) 'grid-test'. + We will use a subset of these classes, and append the following row to our example table: + 
    +<tr  bgcolor="white">
+    <th class="pager-first">first</th>
+    <th class="pager-prev-page">prev</th>
+    <th class="pager-page">page</th>
+    <th class="pager-next" >next</th>
+    <th class="pager-last">last</th>
+</tr>
+
    + So we get: + + + + + + + + + + + + + + + + + + + + + +
    IdDateHourLoad
    pjm-20100405-2405/04/2010241686.4
    prev pagepagenext
    + +
    7. + +

  7. Add Sorting

    + Next is to add some sorting. The way I do is to have a different view for each sort. It sounds terriable but it's really quite clean: + + 
    +{
+   "_id": "_design/tests",
+   "_rev": "7-33b9ed5cb7a82e86d440f83f00cd341e",
+   "language": "javascript",
+   "views": {
+
+       "id": {
+           "map": "function(doc) {\n  emit(doc.id, doc);\n}"
+       },
+       "date": {
+           "map": "function(doc) {\n  emit(doc.date, doc);\n}"
+       },
+       "hourEnd": {
+           "map": "function(doc) {\n  emit(doc.hourEnd, doc);\n}"
+       },
+       "loadAvgHourlyDAY": {
+           "map": "function(doc) {\n  emit(doc.loadAvgHourlyDAY, doc);\n}"
+       }
+   }
+}
+
    + Now added a 'data-sort' class to the column header elements, in this case the TH tags. Also add an 'id' attribute to each column header setting it to the name of the view. + 
    + <table id="example-3" bgcolor="gray" class="grid-test">
+        <tbody class="data-body">
+            <tr  bgcolor="lightgray" class="header-row">
+                <th id="id" class="data-sort" >Id</th>
+                <th id="date" class="data-sort" >Date</th>
+                <th id="hourEnd" class="data-sort" >Hour</th>
+                <th id="loadAvgHourlyDAY" class="data-sort" >Load</th>
+            </tr>
+            <tr  bgcolor="white" class="data-row">
+                <td class="field" id="id">pjm-20100405-24</td>
+                <td class="field" id="date">05/04/2010</td>
+                <td class="field" id="hourEnd" >24</td>
+                <td class="field" id="loadAvgHourlyDAY">1686.4</td>
+            </tr>
+        </tbody>
+        <tr  bgcolor="white">
+            <th class="pager-prev-page">prev page</th>
+            <th class="pager-page">page</th>
+            <th class="pager-next"colspan="2">next</th>
+        </tr>
+    </table>
+
+
    + + + + + + + + + + + + + + + + + + + + + +
    IdDateHourLoad
    pjm-20100405-2405/04/2010241686.4
    prev pagepagenext
    + + That was easy, right ? +
    8. + + + +

  8. Make it Editable

    + Right, now you want your table editable. The easiest way, for now, is to use the editable plugin, http://www.appelsiini.net/projects/jeditable. + Add it to your header: + 
    +<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+<script type="text/javascript" src="jquery.jeditable.js"></script>
+<script type="text/javascript"  src="jquery.couchview.js"></script>
+
    + Then added 'edit' to the class of the data columns you want editable. For this example we will make just 'Load' editable. + + + 
    +<tr  bgcolor="white" class="data-row">
+    <td class="field" id="id">pjm-20100405-24</td>
+    <td class="field" id="date">05/04/2010</td>
+    <td class="field" id="hourEnd" >24</td>
+    <td class="field edit" id="loadAvgHourlyDAY">1686.4</td>
+</tr>
+
    + + + + + + + + + + + + + + + + + + + + + +
    IdDateHourLoad
    pjm-20100405-2405/04/2010241686.4
    prev pagepagenext
    + + There you are.
    9. +
+ + +
+
+

Classes

+ + + + + + + + + Creates a clickable element that requests the next page data + +
classUse
pager-firstCreates a clickable element that requests the first page data
pager-prev-pageCreates a clickable element that requests the previous page data
pager-prevCreates a clickable element that requests data from the previous record
pager-pageThe element's inner html is replaced with the current page number
pager-page-totalThe element's inner html is replaced with the number of pages in total
pager-nextCreates a clickable element that requests data from the next record
pager-next-page
pager-lastCreates a clickable element that requests the last page data
+
+ +
+

Options

+ + + + + +
classUse
urlCreates a clickable element that requests the first page data
limitCreates a clickable element that requests the previous page data
default_viewCreates a clickable element that requests data from the previous record
+
+
+ + + + + + +
+ + +