Flexigrid例子二: 原位编辑器

最新推荐文章于 2017-10-15 09:12:55 发布

炼器散人

最新推荐文章于 2017-10-15 09:12:55 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： function jsonp url ajax server json

本文链接：https://blog.csdn.net/csfreebird/article/details/7908611

Web前端专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何在Flexigrid中实现原位编辑功能，利用jquery-in-place-editor库，无需弹出对话框即可编辑表格数据。编辑操作通过Ajax发送到服务器的update_description接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候，我们想要编辑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, 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函数

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>