Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
416 lines (354 sloc) 20.4 KB

Couch-View

Overview

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.

A Quick Guide with HTML Tables

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, 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”}}
]
}
  • 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>
    
  • 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
  • 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>
    
  • 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. 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
  • 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:






    Id Date Hour Load
    pjm-20100405-24 05/04/2010 24 1686.4
    prev page page next
  • 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>

    Id Date Hour Load
    pjm-20100405-24 05/04/2010 24 1686.4
    prev page page next
    That was easy, right ?
  • 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>

    Id Date Hour Load
    pjm-20100405-24 05/04/2010 24 1686.4
    prev page page next
    There you are.
  • 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