JQGrid

  • Tags : javascript, ui, grid, jquery
  • Latest : 3.8.0.1
  • Last Updated: 21 October 2010
  • Grails version : 1.3.5 > *
  • Authors : null
8 votes
Dependency : 
compile ":jqgrid:3.8.0.1"

Issues

Summary

Installation

grails install-plugin jqgrid

Description

Overview

Provides simple integration with the jquery jqgrid library. More details on JQGrid can be found here: http://www.trirand.com/blog/

Contact

Please report bugs and feature requests in JIRA or at the Grails-User Mailinglist.

The 3.8.x release is not backwards compatible with the 3.7.x release. 3.8.x has been changed so all taglib attributes are the same as the actual jqgrid options. Future 3.x releases will be backward compatible with 3.8.0. See http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs for grid options.

Breaking Changes between 3.8.x and 3.7.x.

The following taglib attributes have been remove

  • listUrl
    • Use the url attribute instead.
  • editUrl
    • Use the editurl attribute instead
  • sortName
    • Use the sortname attribute instead
  • viewRecords
    • Use the viewrecords attribute instead
  • filterToolBar, searchOnEnter
    • This functionality has moved to <jqgrid:filterToolbar>.
  • standardAddButton, standardEditButton, standardDeleteButton, standardSearchButton, standardRefreshButton
    • These attributes have moved to <jqgrid:navigation add="true" edit="true" del="true" search="true" refresh="true" />.
  • resizeOffset
    • This attribute has moved to <jqgrid:resize>

Taglibs

There are a few different taglibs in this plugin. You do not need to use all of them. Just use what makes sense for you.
  • <jqgrid:resources />
    • Includes the required javascript and css for the plugin
  • <jqgrid:cssResources />
    • Includes on the required css for the plugin.
  • <jqgrid:scriptResources />
    • Includes the required javascript for the plugin
  • <jqgrid:grid />
    • Main taglib for the plugin. Generates the jqgrid javascript for the grid (Does not generate the <table> tag or pager <div>)
  • <jqgrid:wrapper />
    • Generates the <table> tag for the grid. Also generates the <div> for the grid pager
  • <jqgrid:navigation />
    • Used in the body of the <jqgrid:grid /> Generates the pager / navigation buttons for the grid.
  • <jqgrid:filterToolbar />
    • Used in the body of the <jqgrid:grid /> Enables Toolbar searching just below the header elements.
  • <jqgrid:resize />
  • <jqgrid:addButton />
    • Used in the body of the <jqgrid:grid /> tag to include a custom "Add" button.
  • <jqgrid:editButton />
    • Used in the body of the <jqgrid:grid /> tag to include a custom "Edit" button
  • <jqgrid:deleteButton />
    • Used in the body of the <jqgrid:grid /> tag to include a custom "Delete" button
  • <jqgrid:searchButton />
    • Used in the body of the <jqgrid:grid /> tag to include a custom "Search" button

Simple Example

<html>
    <head>
        <meta name="layout" content="main" />
        <jq:resources />
        <jqui:resources /> 
        <jqgrid:resources />
        <script type="text/javascript">
	        $(document).ready(function() {
                         <jqgrid:grid
                                id="contact"
                                url="'${createLink(action: 'listJSON')}'"
                                editurl="'${createLink(action: 'editJSON')}'"
                                colNames="'First Name', 'Last Name', 'E-mail', 'Phone', 'id'"
                                colModel="{name:'firstName', editable: true},
                                                {name:'lastName', editable: true},
                                                {name:'email', editable: true},
                                                {name:'phone', editable: true},
                                                {name:'id', hidden: true}"
                                sortname="'lastName'"
                                caption="'Contact List'"
                                height="300"
                                autowidth="true"
                                scrollOffset="0"
                                viewrecords="true"
                                showPager="true"
                                datatype="'json'">
                                <jqgrid:filterToolbar id="contact" searchOnEnter="false" />
                                <jqgrid:navigation id="contact" add="true" edit="true" 
                                      del="true" search="true" refresh="true" />
                                <jqgrid:resize id="contact" resizeOffset="-2" />
                         </jqgrid:grid>
               });
        </script>
   </head>
   <body>
         <jqgrid:wrapper id="contact" />
   </body>
</html>

Notice how the "id" of the different tags match? By using this convention you don't need to think about DOM id's 

.......
class ContactController {
........
    def listJSON = {
                def sortIndex = params.sidx ?: 'name'
		def sortOrder  = params.sord ?: 'asc'
		def maxRows = Integer.valueOf(params.rows)
		def currentPage = Integer.valueOf(params.page) ?: 1
		def rowOffset = currentPage == 1 ? 0 : (currentPage - 1) * maxRows
		def contacts = Contact.createCriteria().list(max: maxRows, offset: rowOffset) {
			if (params.firstName)
				ilike('firstName', "%${params.firstName}%")
			if (params.lastName)
				ilike('lastName', "%${params.lastName}%")
			if (params.email)
				ilike('email', "%${params.email}%")
			if (params.phone) {
				ilike('phone', "%${params.phone}%")
			}
			order(sortIndex, sortOrder).ignoreCase()
		}
		def totalRows = contacts.totalCount
		def numberOfPages = Math.ceil(totalRows / maxRows)
		def results = contacts?.collect {
			[
				 cell: [it.firstName, it.lastName, it.email, it.phone],
				 id: it.id
			]
		}
		def jsonData = [rows: results, page: currentPage, records: totalRows, total: numberOfPages]
                render jsonData as JSON
    }
    ......
}

This will give you a grid like the following:

Demo Pages

The plugin includes a demo page / controller that shows a few of the features of the plugin.

  • Grouping
  • Subgrid
  • Toolbar filtering
  • Many more...
Just pull the latest version of grails-jqgrid from subversion and "grails run-app".

Releases



Version 3.8.0 release 10/11/2010

Version 3.7.2.1 release 9/27/2010

Version 3.7.2 release 9/19/2010
  • Initial Release
  • Based on jqgrid version 3.8.2