I guess the title of this blog should be "Writing a new jQuery plug-in every week" - that's all I seem to be doing right now - but I keep finding functionality that isn't available as a plug-in, or has just been plain poorly implemented.
I'm using jQuery UI for a web project right now, and currently it's missing the ability to turn an html table into a grid styled using the UI css. Now there are some good lightweight plug-ins out there, such as tablesorter and I didnt want to reinvent the wheel. Nor did I want to use a heavy wieght plugin such as jqGrid that is impressive but tries to do too much, especially when what you're really only after is a styled table.
To this end, I'm currently workign on the TableGrid plug-in, that uses the guidelines set out by the jQuery UI development team on how to style tables, whilst incorporating the work done by other developers to enable scrolling, paging, sorting etc. (Example1, Example2)
Which brings me to the subject of this post. I didn't agree with the mechanism used in other grid plug-ins where the data retrieval element is included inside the plug-in, to load data via ajax or some other method. What if I also wanted to load data into say my form?
Following my approach of a super plug-in above, I realised I would first need a data binding plug-in so that developers could load table data on-the-fly. A quick look confirmed there was nothing out there that could be used.
The databind plug-in
Use the databind plug-in to bind a json object to any html element that has text, is an input or is a table/tbody. Each key (property name) is matched to the id of an element within the target of the databind function. The inner text can be used, or the value of an input element - the plug-in is smart enough to decide. Pass array or a collection of objects to the plug-in to bind rows of data to a table or table body.
1 comment:
Your databinding plugin is a great idea...I was thinking of implementing something like this myself, so I'll definitely be checking it out.
Reminds me of Wicket (for Java) which allows you to have pure HTML templates which is great if you're working with a designer who doesn't know server-side programming... or in my case, although I do both frontend and backend development myself, I just find it convenient to have pure HTML templates when I'm in "design mode." Very clean and maintainable. Of course there are situations where it wouldn't be the best option but after all you can just use the databind plugin when you need it.
Thanks for creating this.
Post a Comment