有时候,我们想要编辑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}
- ]
- }
- );
- }
- );
$(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();
- }
- });
- });
- }
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