http://www.cnblogs.com/wintalen/archive/2011/06/10/2077164.html
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" > < title > jQuery EasyUI </ title > < link rel ="stylesheet" type ="text/css" href ="../themes/default/easyui.css" > < link rel ="stylesheet" type ="text/css" href ="../themes/icon.css" > < script type ="text/javascript" src ="../jquery-1.4.2.min.js" ></ script > < script type ="text/javascript" src ="../jquery.easyui.min.js" ></ script > < script > var users = {total: 6 ,rows:[ {no: 1 ,name: ' 用户1 ' ,addr: ' 山东济南 ' ,email: ' user1@163.com ' ,birthday: ' 1/1/1980 ' }, {no: 2 ,name: ' 用户2 ' ,addr: ' 山东济南 ' ,email: ' user2@163.com ' ,birthday: ' 1/1/1980 ' }, {no: 3 ,name: ' 用户3 ' ,addr: ' 山东济南 ' ,email: ' user3@163.com ' ,birthday: ' 1/1/1980 ' }, {no: 4 ,name: ' 用户4 ' ,addr: ' 山东济南 ' ,email: ' user4@163.com ' ,birthday: ' 1/1/1980 ' }, {no: 5 ,name: ' 用户5 ' ,addr: ' 山东济南 ' ,email: ' user5@163.com ' ,birthday: ' 1/1/1980 ' }, {no: 6 ,name: ' 用户6 ' ,addr: ' 山东济南 ' ,email: ' user6@163.com ' ,birthday: ' 1/1/1980 ' } ]}; $( function (){ $( ' #tt ' ).datagrid({ title: ' Editable DataGrid ' , iconCls: ' icon-edit ' , width: 530 , height: 250 , singleSelect: true , columns:[[ {field: ' no ' ,title: ' 编号 ' ,width: 50 ,editor: ' numberbox ' }, {field: ' name ' ,title: ' 名称 ' ,width: 60 ,editor: ' text ' }, {field: ' addr ' ,title: ' 地址 ' ,width: 100 ,editor: ' text ' }, {field: ' email ' ,title: ' 电子邮件 ' ,width: 100 , editor:{ type: ' validatebox ' , options:{ validType: ' email ' } } }, {field: ' birthday ' ,title: ' 生日 ' ,width: 80 ,editor: ' datebox ' }, {field: ' action ' ,title: ' 操作 ' ,width: 70 ,align: ' center ' , formatter: function (value,row,index){ if (row.editing){ var s = ' <a href="#" οnclick="saverow( ' + index + ' )">保存</a> ' ; var c = ' <a href="#" οnclick="cancelrow( ' + index + ' )">取消</a> ' ; return s + c; } else { var e = ' <a href="#" οnclick="editrow( ' + index + ' )">编辑</a> ' ; var d = ' <a href="#" οnclick="deleterow( ' + index + ' )">删除</a> ' ; return e + d; } } } ]], toolbar:[{ text: ' 增加 ' , iconCls: ' icon-add ' , handler:addrow },{ text: ' 保存 ' , iconCls: ' icon-save ' , handler:saveall },{ text: ' 取消 ' , iconCls: ' icon-cancel ' , handler:cancelall }], onBeforeEdit: function (index,row){ row.editing = true ; $( ' #tt ' ).datagrid( ' refreshRow ' , index); editcount ++ ; }, onAfterEdit: function (index,row){ row.editing = false ; $( ' #tt ' ).datagrid( ' refreshRow ' , index); editcount -- ; }, onCancelEdit: function (index,row){ row.editing = false ; $( ' #tt ' ).datagrid( ' refreshRow ' , index); editcount -- ; } }).datagrid( ' loadData ' ,users).datagrid( ' acceptChanges ' ); }); var editcount = 0 ; function editrow(index){ $( ' #tt ' ).datagrid( ' beginEdit ' , index); } function deleterow(index){ $.messager.confirm( ' 确认 ' , ' 是否真的删除? ' , function (r){ if (r){ $( ' #tt ' ).datagrid( ' deleteRow ' , index); } }); } function saverow(index){ $( ' #tt ' ).datagrid( ' endEdit ' , index); } function cancelrow(index){ $( ' #tt ' ).datagrid( ' cancelEdit ' , index); } function addrow(){ if (editcount > 0 ){ $.messager.alert( ' 警告 ' , ' 当前还有 ' + editcount + ' 记录正在编辑，不能增加记录。 ' ); return ; } $( ' #tt ' ).datagrid( ' appendRow ' ,{ no: '' , name: '' , addr: '' , email: '' , birthday: '' }); } function saveall(){ $( ' #tt ' ).datagrid( ' acceptChanges ' ); } function cancelall(){ $( ' #tt ' ).datagrid( ' rejectChanges ' ); } </ script > </ head > < body > < h1 > Editable DataGrid </ h1 > < table id ="tt" ></ table > </ body > </ html >
淘啦啦
转载于:https://www.cnblogs.com/colin5/archive/2012/04/17/2454103.html
相关资源：Jquery datagrid实现单元格编辑