Easyui---datagrid编辑单元格及获取编辑前后数据

编辑之前

编辑之后

代码实现

<div>
    <table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:auto"
            data-options="
                iconCls: 'icon-edit',
                singleSelect: true,
                url: '__CONTROLLER__/getAdminInfo/',
                method:'get',
                toolbar: '#tb'
            ">
        <thead>
            <tr>
                <th data-options="field:'shop_code',width:80,editor:'text'">Item ID</th>
                <th data-options="field:'user_code',width:100,editor:'text'">Product</th>
                <th data-options="field:'login_name',width:80,editor:'text'">List Price</th>
                <th data-options="field:'name',width:80,editor:'text'">Unit Cost</th>
                <th data-options="field:'gender',width:250,editor:'text'">Attribute</th>
                <th data-options="field:'enabled',width:60,align:'center',editor:{type:'checkbox',options:{on:'1',off:'已禁封'}}">Status</th>
            </tr>
        </thead>
    </table>
    <div id="tb" style="height:auto">
        <a href="javascript:void(0)" class="easyui-linkbutton"
        data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>
    </div>
    <script type="text/javascript">
        var editIndex = undefined;
        $('#dg').datagrid({
            onDblClickRow: function(index,field,value){                    
                //field:如果事件为onDblClickCell，则field，为双击某个单元格的属性名，如'login_name'
                if (editIndex != index){
                    if (endEditing()){                            
                        $('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
                        editIndex = index;
                    } else {
                        $('#dg').datagrid('selectRow', editIndex);
                    }
                }
                else editIndex = undefined;
            }
        });  

        function accept(){
            if(endEditing()){

            }
        }    

        function endEditing(){
            if (editIndex == undefined){return true}
            if ($('#dg').datagrid('validateRow', editIndex)){    
                //获取login_name修改之前的值，注意，得到login_name为object
                //var login_name = $('#dg').datagrid('getEditor', {index:editIndex,field:'login_name'});    
                //得到对象（object）
                //console.log(login_name); 
                //得到旧值
                //console.log(login_name ['oldHtml']); 
                //获取修改行的所有数据
                var rows = $('#dg').datagrid('getRows');
                //获取修后该行所有field的值，在这里将修改后数据写入到数据库中
                var rowData = rows[editIndex];
                console.log(rowData);
                //结束编辑:如果在结束编辑之前，rowData还是编辑之前的数据，只有结束编辑之后，rowData才是编辑完成的数据
                $('#dg').datagrid('endEdit', editIndex);                                
                //撤销修改
                //$("#shop_t").datagrid('rejectChanges');    
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
    </script>
</div>