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',
      400,
     height: 300,
     colModel : [
  {hide: '<%=check%>', name: 'check',  30, sortable: true, align: 'left'},
  {display: 'ID', name: 'id',  90, sortable: true, align: 'left'},
  {display: '<%=description%>', name: 'description',  110, sortable: true, align: 'left',process:editDescription},
  {display: '<%=status%>', name: 'status',  20, sortable: true, align: 'left'},
  {display: '<%=unbind%>', name: 'unbind',  20, sortable: true, align: 'left',process:unbindDisplay}
     ]
 }
    );
}
    );

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

step2: 使用jquery-in-place-editor来实现editDescription函数

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

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 会让你在web界面上看到原位编辑的效果。

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

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

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

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

原文链接：http://blog.csdn.net/sheismylife/article/details/7908611