快捷導航

jQuery EasyUI中對表格進行編輯的實現(xiàn)代碼

更新時間：2010年06月10日 23:08:42 作者：

對表格進行增刪改后一次性保存或回滾的發(fā)生相當有用。參照官方的教程例子做了個用戶管理的小例子。

效果圖:

 
<!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> 