Flexigrid example two:in-place editor

Sometimes we want to edit the flexigrid' data. An in-place editor is required, don't need to pop up a dialog any more. I will show you how to do this here.

I use jquery-in-place-editor library. Please refer to the official site:
http://code.google.com/p/jquery-in-place-editor/

step1: add a process function for the column of flexigrid when you define the flexigrid model.


$(document).ready ( function() {
    $("#displays").flexigrid (
{
   url: '<%=jsonp%>/bindedDisplays',
   method:'POST',
   dataType: 'json',
   width: 400,
   height: 300,
   colModel : [
{hide: '<%=check%>', name: 'check', width: 30, sortable: true, align: 'left'},
{display: 'ID', name: 'id', width: 90, sortable: true, align: 'left'},
{display: '<%=description%>', name: 'description', width: 110, sortable: true, align: 'left',process:editDescription},
{display: '<%=status%>', name: 'status', width: 20, sortable: true, align: 'left'},
{display: '<%=unbind%>', name: 'unbind', width: 20, sortable: true, align: 'left',process:unbindDisplay}
   ]
}
    );
}
 );

step2:Implement the editDescription function using jquery-in-place-editor


function editDescription(celDiv, id){
    $( celDiv ).click( function() {
var idTd = $(celDiv).parent().parent().children()[1];
$(celDiv).editInPlace({
   url: "update_description",
   params: "address="+$(idTd.children).html(),
   error:function(obj){
alert(JSON.stringify(obj));
   },
   success:function(obj){
var str = m[JSON.parse(obj).status+""][window.curLanguage];
alert(str);
$("#displays").flexReload();
   }
});
    });
}

$(celDiv).editInPlace will let see an in-place editor effect in web page.
Ajax request will be sent to the web server's ./update_description path via jquery-in-place-editor.

Very easy! You also need to include the necessary js file like so:

 <script type="text/javascript" src="script/jquery.editinplace.js"></script>