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 ')">保存</a> '; <br>var c = '<a href="#" onclick="cancelrow(' index ')">取消</a>'; <br>return s c; <br>} else { <br>var e = '<a href="#" onclick="editrow(' index ')">编辑</a> '; <br>var d = '<a href="#" onclick="deleterow(' index ')">删除</a>'; <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