easy_install tw.jquery
The FlexiGrid widget supports the following parameters:
colModel = [
{'display':'ID', 'name':'id', 'width':20, 'align':'center'},
{'display':'Title', 'name':'title', 'width':80, 'align':'left'},
{'display':'Description', 'name':'description', 'width':100, 'align':'left'},
{'display':'Year', 'name':'year', 'width':40, 'align':'center'},
{'display':'Genera', 'name':'genera', 'width':40, 'align':'center'}
]
searchitems = [
{'display':'Title', 'name':'title', 'isdefault':True},
{'display':'Year', 'name':'year'},
{'display':'Genre', 'name':'genera'}
]
from tw.api import js_callback
buttons=[
{'name':'Add', 'bclass':'add', 'onpress': js_callback('add_record')},
{'name':'Delete', 'bclass':'delete', 'onpress': js_callback('delete_record')},
{'separator':True}
]
The onpress key takes a javascript callback function as the value which is called when the button is pressed. In this example, the Add and Delete buttons call the callback functions add_record() and delete_record() respectively. These handlers must be coded separately and included in the template.
For example the widget could be instantiated as:
from tw.jquery import FlexiGrid
grid = FlexiGrid(id='flex', fetchURL='fetch', title='Movies',
colModel=colModel, useRp=True, rp=10,
sortname='title', sortorder='asc', usepager=True,
searchitems=searchitems,
showTableToggleButton=True,
buttons=buttons,
width=500,
height=200
)
Once the Widget is instantiated it can be served up to the user from the controller:
@expose('samplegrid.templates.index')
def index(self):
pylons.c.grid = grid
return dict()
The widget can be displayed in the template by:
${tmpl_context.grid(value=value)}
Before displaying the grid it is necessary to setup the controller method for serving the data using JSON as the data is fetched by the grid before it is rendered. The parameters passed to the FlexiGrid widget while instantiation are in turn passed to the controller method by the javascript code of the widget. The controller method for handling the JSON request would be:
@validate(validators={"page":validators.Int(), "rp":validators.Int()})
@expose('json')
def fetch(self, page=1, rp=25, sortname='title', sortorder='asc', qtype=None, query=None):
offset = (page-1) * rp
if (query):
d = {qtype:query}
movies = DBSession.query(Movie).filter_by(**d)
else:
movies = DBSession.query(Movie)
total = movies.count()
column = getattr(Movie.c, sortname)
movies = movies.order_by(getattr(column,sortorder)()).offset(offset).limit(rp)
rows = [{'id' : movie.id,
'cell': [movie.id, movie.title, movie.description, movie.year, movie.genera]} for movie in movies]
return dict(page=page, total=total, rows=rows)
While all keyword parameters are the same as those passed to the widget during instantiation, the searchitems parameter is broken down by the flexigrid js module. The qtype parameter is a string value for the class attribute to be matched for searching and the query parameter contains the search string provided by the User. The above example provides equality match only.
Finally the FlexiGrid will be rendered as: