Clone this wiki locally
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…
Before I embark in trying to explain how to use this plug-in, I’m going to explain the JSON data structure 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:
We will start by using this simple couchdb view
So if you use the above view by requesting this url [http://188.8.131.52:8080/mydb/design/tests/view/id?limit=2] you will get
What to Include
Include jquery in your HTML header. You can use googleapis for this or the one that comes with couchdb. Then add jquery.couch-view.js.
Creating a Grid using
Code an example 1.Create Your TemplateHTML table with one row of dummy data
2. Apply the plug-in
Apply the plug-in 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.
Enliven your Table
- Add to the parent container, in this case table, the class
grid-test, give it also an
<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.