jQuery EasyUI中对表格进行编辑的实现代码

发布时间：2016-11-24 13:50:57 所属栏目：Unix 来源：站长网

导读：效果图: 复制代码代码如下: lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"gt; lt;htmlgt; lt;headgt; lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"gt; lt;titlegt

效果图:

复制代码代码如下:
lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"gt;
lt;htmlgt;
lt;headgt;
lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"gt;
lt;titlegt;jQuery EasyUIlt;/titlegt;
lt;link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"gt;
lt;link rel="stylesheet" type="text/css" href="../themes/icon.css"gt;
lt;script type="text/javascript" src="../jquery-1.4.2.min.js"gt;lt;/scriptgt;
lt;script type="text/javascript" src="../jquery.easyui.min.js"gt;lt;/scriptgt;
lt;scriptgt;
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 = 'lt;a href="#" onclick="saverow('+index+')"gt;保存lt;/agt; ';
var c = 'lt;a href="#" onclick="cancelrow('+index+')"gt;取消lt;/agt;';
return s+c;
} else {
var e = 'lt;a href="#" onclick="editrow('+index+')"gt;编辑lt;/agt; ';
var d = 'lt;a href="#" onclick="deleterow('+index+')"gt;删除lt;/agt;';
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 gt; 0){
$.messager.alert('警告','当前还有'+editcount+'记录正在编辑，不能增加记录。');
return;
}
$('#tt').datagrid('appendRow',{
no:'',
name:'',
addr:'',
email:'',
birthday:''
});
}
function saveall(){
$('#tt').datagrid('acceptChanges');
}
function cancelall(){
$('#tt').datagrid('rejectChanges');
}
lt;/scriptgt;
lt;/headgt;
lt;bodygt;
lt;h1gt;Editable DataGridlt;/h1gt;
lt;table id="tt"gt;lt;/tablegt;
lt;/bodygt;
lt;/htmlgt;

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!