在jQuery EasyUI中实现对DataGrid进行编辑

<!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>
posted @ 2011-06-10 00:05  顺德早茶  阅读(16094)  评论(2编辑  收藏  举报