Flexigrid例子二: 原位编辑器

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

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

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

1. $(document).ready ( function() {
2. $("#displays").flexigrid (
3. {
4. url: '<%=jsonp%>/bindedDisplays',
5. method:'POST',
6. dataType: 'json',
7. width: 400,
8. height: 300,
9. colModel : [
10. {hide: '<%=check%>', name: 'check', width: 30, sortable: true, align: 'left'},
11. {display: 'ID', name: 'id', width: 90, sortable: true, align: 'left'},
12. {display: '<%=description%>', name: 'description', width: 110, sortable: true, align: 'left',process:editDescription},
13. {display: '<%=status%>', name: 'status', width: 20, sortable: true, align: 'left'},
14. {display: '<%=unbind%>', name: 'unbind', width: 20, sortable: true, align: 'left',process:unbindDisplay}
15. ]
16. }
17. );
18. }
19. );

$(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: 使用jquery-in-place-editor来实现editDescription函数

1. function editDescription(celDiv, id){
2. $( celDiv ).click( function() {
3. var idTd = $(celDiv).parent().parent().children()[1];
4. $(celDiv).editInPlace({
5. url: "update_description",
6. params: "address="+$(idTd.children).html(),
7. error:function(obj){
8. alert(JSON.stringify(obj));
9. },
10. success:function(obj){
11. var str = m[JSON.parse(obj).status+""][window.curLanguage];
12. alert(str);
13. $("#displays").flexReload();
14. }
15. });
16. });
17. }

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文件，像这样：

1. <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