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>

Id	Date	Hour	Load
test_id	05/04/2010	24	1686.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

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

Add a Pager

Now we will add the pager. Here are the relevant classes:

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

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

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

Options

class	Use
url	Creates a clickable element that requests the first page data
limit	Creates a clickable element that requests the previous page data
default_view	Creates a clickable element that requests data from the previous record

thanos / couchview Goto Github PK

couchview's Introduction

Couch-View

Overview

A Quick Guide with HTML Tables

Before I Embark…

What to Include

Creating your Template

Apply the plugin

Enliven your Table

Add a Pager

Add Sorting

Make it Editable

Classes

Options

couchview's People

Contributors

Stargazers

Watchers

Forkers

Recommend Projects

Recommend Topics

Recommend Org