jQuery EasyUI 에서 표를 편집 하 는 실현 코드

효과 도:
 
<!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:'[email protected]',birthday:'1/1/1980'},
{no:2,name:' 2',addr:' ',email:'[email protected]',birthday:'1/1/1980'},
{no:3,name:' 3',addr:' ',email:'[email protected]',birthday:'1/1/1980'},
{no:4,name:' 4',addr:' ',email:'[email protected]',birthday:'1/1/1980'},
{no:5,name:' 5',addr:' ',email:'[email protected]',birthday:'1/1/1980'},
{no:6,name:' 6',addr:' ',email:'[email protected]',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>

좋은 웹페이지 즐겨찾기