jQuery EasyUI中对表格进行编辑的实现代码 |
效果图: ![]() 复制代码 代码如下: <!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="#" onclick="saverow(+index+)">保存</a> ; var c = <a href="#" onclick="cancelrow(+index+)">取消</a>; return s+c; } else { var e = <a href="#" onclick="editrow(+index+)">编辑</a> ; var d = <a href="#" onclick="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> |