jQuery EasyUI中对表格进行编辑的实现代码_jquery

效果图:

复制代码 代码如下:

<script> <BR>var users = {total:6,rows:[ <BR>{no:1,name:'用户1',addr:'山东济南',email:'user1@163.com',birthday:'1/1/1980'}, <BR>{no:2,name:'用户2',addr:'山东济南',email:'user2@163.com',birthday:'1/1/1980'}, <BR>{no:3,name:'用户3',addr:'山东济南',email:'user3@163.com',birthday:'1/1/1980'}, <BR>{no:4,name:'用户4',addr:'山东济南',email:'user4@163.com',birthday:'1/1/1980'}, <BR>{no:5,name:'用户5',addr:'山东济南',email:'user5@163.com',birthday:'1/1/1980'}, <BR>{no:6,name:'用户6',addr:'山东济南',email:'user6@163.com',birthday:'1/1/1980'} <BR>]}; <BR>$(function(){ <BR>$('#tt').datagrid({ <BR>title:'Editable DataGrid', <BR>iconCls:'icon-edit', <BR>width:530, <BR>height:250, <BR>singleSelect:true, <BR>columns:[[ <BR>{field:'no',title:'编号',width:50,editor:'numberbox'}, <BR>{field:'name',title:'名称',width:60,editor:'text'}, <BR>{field:'addr',title:'地址',width:100,editor:'text'}, <BR>{field:'email',title:'电子邮件',width:100, <BR>editor:{ <BR>type:'validatebox', <BR>options:{ <BR>validType:'email' <BR>} <BR>} <BR>}, <BR>{field:'birthday',title:'生日',width:80,editor:'datebox'}, <BR>{field:'action',title:'操作',width:70,align:'center', <BR>formatter:function(value,row,index){ <BR>if (row.editing){ <BR>var s = '<a href="#" onclick="saverow(' index ')">保存 '; <BR>var c = '<a href="#" onclick="cancelrow(' index ')">取消'; <BR>return s c; <BR>} else { <BR>var e = '<a href="#" onclick="editrow(' index ')">编辑 '; <BR>var d = '<a href="#" onclick="deleterow(' index ')">删除'; <BR>return e d; <BR>} <BR>} <BR>} <BR>]], <BR>toolbar:[{ <BR>text:'增加', <BR>iconCls:'icon-add', <BR>handler:addrow <BR>},{ <BR>text:'保存', <BR>iconCls:'icon-save', <BR>handler:saveall <BR>},{ <BR>text:'取消', <BR>iconCls:'icon-cancel', <BR>handler:cancelall <BR>}], <BR>onBeforeEdit:function(index,row){ <BR>row.editing = true; <BR>$('#tt').datagrid('refreshRow', index); <BR>editcount ; <BR>}, <BR>onAfterEdit:function(index,row){ <BR>row.editing = false; <BR>$('#tt').datagrid('refreshRow', index); <BR>editcount--; <BR>}, <BR>onCancelEdit:function(index,row){ <BR>row.editing = false; <BR>$('#tt').datagrid('refreshRow', index); <BR>editcount--; <BR>} <BR>}).datagrid('loadData',users).datagrid('acceptChanges'); <BR>}); <BR>var editcount = 0; <BR>function editrow(index){ <BR>$('#tt').datagrid('beginEdit', index); <BR>} <BR>function deleterow(index){ <BR>$.messager.confirm('确认','是否真的删除?',function(r){ <BR>if (r){ <BR>$('#tt').datagrid('deleteRow', index); <BR>} <BR>}); <BR>} <BR>function saverow(index){ <BR>$('#tt').datagrid('endEdit', index); <BR>} <BR>function cancelrow(index){ <BR>$('#tt').datagrid('cancelEdit', index); <BR>} <BR>function addrow(){ <BR>if (editcount > 0){ <BR>$.messager.alert('警告','当前还有' editcount '记录正在编辑，不能增加记录。'); <BR>return; <BR>} <BR>$('#tt').datagrid('appendRow',{ <BR>no:'', <BR>name:'', <BR>addr:'', <BR>email:'', <BR>birthday:'' <BR>}); <BR>} <BR>function saveall(){ <BR>$('#tt').datagrid('acceptChanges'); <BR>} <BR>function cancelall(){ <BR>$('#tt').datagrid('rejectChanges'); <BR>} <BR></script>

Editable DataGrid