編輯之前

編輯之後

程式碼實現

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