Flexigrid例子二: 原位编辑器

有时候，我们想要编辑flexigrid里的数据。一个原位编辑器是需要的，现在不需要再弹出一个对话框了。这里我会展示如何做到这点。

我使用了jquery-in-place-editor库。请参考官方站点：http://code.google.com/p/jquery-in-place-editor/

step1: 在定义flexigrid模型的时候，添加一个函数来处理flexigrid的列

$(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,{display: '<%=description%>',name: 'description',width: 110,align: 'left',process:editDescription},{display: '<%=status%>',name: 'status',width: 20,{display: '<%=unbind%>',name: 'unbind',process:unbindDisplay}
     ]
 }
    ); 
}
    );

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();
     }
 });
    });
}

Ajax请求会通过jquery-in-place-editor发到web server的update_description路径上。

非常简单，你当然也需要引入必要的js文件，像这样：

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