This JQuery plugin lets you map a CouchDb view to a html grid. That’s it. I looked at the other JQuery grid plug-ins – many of which a really great – But I couldn’t get them working and since I’m lazy I wrote this specialized plug-in.
So here are its features:
- It’s HTML agnostic. Y ou can use tables or divs or any HTML to layout your data.
- You can view JSON data from any source – such as CouchDB.
- You get column sorting.
- You get paging paging
- It’s compatible with JEditable. So you can edit your data.
- Really small – Currently under 3K.
- Coded in a clean fashion so you can subclass header/body or footer generation and the loading and saving of data.
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, null);\n}” } } }So http://69.164.211.38:8080/mydb/design/tests/_view/id?limit=2&includedocs=true will give you:
{ total_rows, offset, “rows”:[ { “id”:“4da96f65dfecf6edd329269c3799de60”, “key”:“pjm-20100405-01”, “value”:{"_id":“4da96f65dfecf6edd329269c3799de60”,“_rev”:“1-3a49c260576c26c758742c8842d5b9ca”,loadAvgHourlyNI,hourEnd,loadAvgHourlyDUQ,loadAvgHourlyDAY,loadAvgHourlyMIDATL,loadAvgHourlyDOM,loadAvgHourlyAEP,loadAvgHourlyAP,“date”:“2010-04-05”,“id”:“pjm-20100405-01”} }, {"id":“6339d2c104c222a31872ac400f2a5bb9”,“key”:“pjm-20100405-02”,“value”:{"_id":“6339d2c104c222a31872ac400f2a5bb9”,“_rev”:“1-0e0e84e6485fd61bf830cd01df406393”,loadAvgHourlyNI,hourEnd,loadAvgHourlyDUQ,loadAvgHourlyDAY,loadAvgHourlyMIDATL,loadAvgHourlyDOM,loadAvgHourlyAEP,loadAvgHourlyAP,“date”:“2010-04-05”,“id”:“pjm-20100405-02”}} ] }
<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>
| ||||||||
|
<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>
- 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" >
-
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>
Id Date Hour Load pjm-20100405-24 05/04/2010 24 1686.4
Creates a clickable element that requests the next page data
class | Use |
---|---|
pager-first | Creates a clickable element that requests the first page data |
pager-prev-page | Creates a clickable element that requests the previous page data |
pager-prev | Creates a clickable element that requests data from the previous record |
pager-page | The element’s inner html is replaced with the current page number |
pager-page-total | The element’s inner html is replaced with the number of pages in total |
pager-next | Creates a clickable element that requests data from the next record |
pager-next-page | |
pager-last | Creates a clickable element that requests the last page data |
<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:
Id | Date | Hour | Load |
---|---|---|---|
pjm-20100405-24 | 05/04/2010 | 24 | 1686.4 |
prev page | page | next |
{
“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}” } }
“_id”: “_design/tests”,
“_rev”: “7-33b9ed5cb7a82e86d440f83f00cd341e”,
“language”: “javascript”,
“views”: {}
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>
Id | Date | Hour | Load |
---|---|---|---|
pjm-20100405-24 | 05/04/2010 | 24 | 1686.4 |
prev page | page | next |
<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>
Id | Date | Hour | Load |
---|---|---|---|
pjm-20100405-24 | 05/04/2010 | 24 | 1686.4 |
prev page | page | next |
Creates a clickable element that requests the next page data
class | Use |
---|---|
pager-first | Creates a clickable element that requests the first page data |
pager-prev-page | Creates a clickable element that requests the previous page data |
pager-prev | Creates a clickable element that requests data from the previous record |
pager-page | The element’s inner html is replaced with the current page number |
pager-page-total | The element’s inner html is replaced with the number of pages in total |
pager-next | Creates a clickable element that requests data from the next record |
pager-next-page | |
pager-last | Creates a clickable element that requests the last page data |