JqueryUI表格编辑-与后端交互问题

datagrid表格实现编辑

• 问题描述
  datagrid 表格编辑时并没有修改然而却在数据库中保留了数据，并刷新前端

if(changes){
    $.post(url,param,function(data){});
}

• 问题解决方案
  分析：发现下面都不该调用后端然而却调用了，原因是没有编辑然而onAfterEdit(index, row, changes){}事件中changes不为空
  

  处理方法：修改编辑器，在编辑结束事件中做判断

• 解决实现

// 扩展datagrid编辑器-单元格编辑（直接从demo中拷贝做相应修改）
$.extend($.fn.datagrid.methods, {
            editCell: function(jq,param){
                return jq.each(function(){
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields',true).concat(
                    $(this).datagrid('getColumnFields'));
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field){
                            col.editor = null;
                        }
                    }
                    $(this).datagrid('beginEdit', param.index);
                    var ed = $(this).datagrid('getEditor', param);
                    if (ed){
                        // 给options对象添加编辑前值属性
                        opts.oldHtml = ed.oldHtml;
                        if ($(ed.target).hasClass('textbox-f')){
                            $(ed.target).textbox('textbox').focus();
                        } else {
                            $(ed.target).focus();
                        }
                    }
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;
                    }
                });
            },
            enableCellEditing: function(jq){
                return jq.each(function(){
                    var dg = $(this);
                    var opts = dg.datagrid('options');
                    opts.oldOnClickCell = opts.onClickCell;
                    opts.onClickCell = function(index, field){
                        if (opts.editIndex != undefined){

                            if (dg.datagrid('validateRow', opts.editIndex)){
                                dg.datagrid('endEdit', opts.editIndex);
                                opts.editIndex = undefined;
                            } else {
                                return;
                            }
                        }
                        else{
                        // 这里修改原来的if 为if-else 这样体验会更好 
                            dg.datagrid('selectRow', index).datagrid('editCell', {
                                index: index,
                                field: field
                            });
                            opts.editIndex = index;
                            opts.oldOnClickCell.call(this, index, field);
                        }
                    }
                });
            }
  });
// 给opopns 添加编辑后处理事件

onAfterEdit:function(index,row,changes){
    // 过滤为{} 的情况
    for(var key in changes)
    {
        var opts = $('#dg').datagrid('options');
        // 过滤为空或者数字情况
        if(changes[key] != opts.oldHtml)
        {
           var url ='...';
           var updateParams = $.extend(params,{"key":key,"value":changes[key]});
           $.post(url,updateParams,function(data){});
        }
        opts.oldHtml = "";
    }
}

// 强烈建议 datagrid 提供编辑功能初始化时提供 onClickCell事件，要不然会出现一些不必要问题

treegrid 表格编辑功能

// treegrid 继承了datagrid 所以单元格编辑扩展依然可用
// 只需要注意 treegrid 的onAfterEdit(row,changes)方法没有index属性