Using Flexigrid simple FAQ

[size=medium]From:http://code.google.com/p/flexigrid/wiki/FAQ

Frequently Asked Questions
Typical Grid and Debug tools

In these examples, we use a typical Grid:

var myFlex = {
autoload : false,
dataType : 'json',
url : 'grid.php',
usepager : true
};

$('#grid01').flexigrid($.extend({}, myFlex, {
colModel : [
{name: 'name', display: 'NAME', sortable: true},
{name: 'status', display: 'STATUS', sortable: true},
{name: 'sign', display: 'SIGN', sortable: true}
]
}));

For debug we use console.log() more likely than alert(), which is not

always work as expected.
Examples

#Dynamic_columns_and_Post_parameter_to_server
#Get_selected_row
#Mouseclick_and_other_events
#Multiple_filters
#Format_cells

Dynamic columns and Post parameter to server

Colmodel define in variable. Parameters send to server by

.flexOptions() on onSubmit().

var colModel01 = [
{name: 'name', display: 'NAME', sortable: true},
{name: 'status', display: 'STATUS', sortable: true},
{name: 'sign', display: 'SIGN', sortable: true}
];

$('#grid01').flexigrid($.extend({}, myFlex, {
colModel : colModel01,
onSubmit : function(){
$('#grid01').flexOptions({params: [
{name:'colls', value: $.param({colls: $.map(colModel01,

function(elem,id){return elem.name}) }) }
]});
return true;
}
}));

In this code we post to server on load next data (with column names):

page=1&rp=15&sortname=undefined&sortorder=undefined&query=&qtype=&
colls=colls%255B%255D%3Dname%26colls%255B%255D%3Dstatus%26colls%255B
%255D%3Dsign

Get selected row

The difficulty lies in linking: column_name - data. That is why the

order of columns can be changed, and we can not use index in the

array of row cells. In flexigrid-1.1 we have the attribute 'abbr' for

sortable table cells (issue 46).

$('#grid01').click(function(event){
$('.trSelected', this).each( function(){
console.log(
' rowId: ' + $(this).attr('id').substr(3) +
' name: ' + $('td[abbr="name"] >div', this).html() +
' sign: ' + $('td[abbr="sign"] >div', this).html() +
' status: ' + $('td[abbr="status"] >div', this).html()
);
});
});

Mouseclick and other events

As of jQuery 1.7, the .on() method provides all functionality

required for attaching event handlers.

$('.flexigrid').on('mouseenter', 'tr[id*="row"]', function(){
console.log('mouseenter rowId: ' + $(this).attr('id').substr(3));
});

With older jQuery: If we bind the event to the cells, we have to use

the .live() or .delegate(). Because it when receiving data grid

content is recreated.

$('.flexigrid tr[id*="row"]').live('mouseenter', function(){
console.log('mouseenter rowId: ' + $(this).attr('id').substr(3));
});

Multiple filters

Just add a custom filter form

<form id="fmFilter">
<input id="fmFilterSel1" name="fmFilterSel1" type="checkbox" />
<input id="fmFilterSel2" name="fmFilterSel2" type="checkbox" />
<input id="fmFilterSel3" name="fmFilterSel3" type="text" />
</form>
<table id="grid01"><tr><td></td></tr></table>

<script>
$('#grid01').flexigrid($.extend({}, myFlex, {
onSubmit : function(){
$('#grid01').flexOptions({params: [{name:'callId',

value:'grid01'}].concat($('#fmFilter').serializeArray())});
return true;
}
});
</script>

And you send to server the filter condition of any complexity.
Format cells

You can colorize the cells, and even change the output according to

the received data.

function gridFormat() {
var lblStatus = {
'101' : {
css : '',
txt : 'STATUS_OK'
},
'102' : {
css : 'cellDisable',
txt : 'STATUS_LOCK'
},
'103' : {
css : 'cellWarning',
txt : 'STATUS_BAD'
}
};
$('#grid01 tr').each( function(){
var cell = $('td[abbr="status"] >div', this);
$(this).addClass( lblStatus[cell.text()].css );
cell.text( lblStatus[cell.text()].txt );
});
return true;
}

$('#grid01').flexigrid($.extend({}, myFlex, {
buttons : [
{name: 'CLEAR', onpress: function(com,grid){

$('#grid01').flexAddData({rows:[],page:0,total:0}); }},
{name: 'FILL', onpress: function(com,grid){

$('#grid01').flexAddData({rows:[
{id:'id0',cell:['name00',101,'A']},
{id:'id1',cell:['name01',102,'B']},
{id:'id2',cell:['name02',103,'C']}
],page:1,total:3}); }}
],
onSuccess : gridFormat
}); [/size]