Implementation code for editing tables in jQuery EasyUI_jquery

Rendering:

Copy code The code is as follows:

< ;head>


< ;link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">



<script> <br>var users = {total:6, rows:[ <br>{no:1,name:'User 1',addr:'Shandong Jinan',email:'user1@163.com',birthday:'1/1/1980'}, <br>{ no:2,name:'User 2',addr:'Shandong Jinan',email:'user2@163.com',birthday:'1/1/1980'}, <br>{no:3,name:' User3',addr:'Shandong Jinan',email:'user3@163.com',birthday:'1/1/1980'}, <br>{no:4,name:'User 4',addr:' Jinan, Shandong',email:'user4@163.com',birthday:'1/1/1980'}, <br>{no:5,name:'User 5',addr:'Jinan, Shandong',email:' user5@163.com',birthday:'1/1/1980'}, <br>{no:6,name:'user6',addr:'Shandong Jinan',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: 'number',width:50,editor:'numberbox'}, <br>{field:'name',title:'name',width:60,editor:'text'}, <br>{field:'addr ',title:'Address',width:100,editor:'text'}, <br>{field:'email',title:'Email',width:100, <br>editor:{ <br>type :'validatebox', <br>options:{ <br>validType:'email' <br>} <br>} <br>}, <br>{field:'birthday',title:'birthday',width: 80,editor:'datebox'}, <br>{field:'action',title:'action',width:70,align:'center', <br>formatter:function(value,row,index){ <br>if (row.editing){ <br>var s = '<a href="#" onclick="saverow(' index ')">save</a> '; <br>var c = '<a href="#" onclick="cancelrow(' index ')">Cancel</a>'; <br>return s c; <br>} else { <br>var e = '< a href="#" onclick="editrow(' index ')">edit</a> '; <br>var d = '<a href="#" onclick="deleterow(' index ') ">delete</a>'; <br>return e d; <br>} <br>} <br>} <br>]], <br>toolbar:[{ <br>text:'Add' , <br>iconCls:'icon-add', <br>handler:addrow <br>},{ <br>text:'save', <br>iconCls:'icon-save', <br>handler:saveall <br>},{ <br>text:'cancel', <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('Confirm', 'Are you really deleting?', 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('Warning', 'There are currently 'editcount' records being edited and cannot Add records. '); <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