注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

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

2013-01-15 10:50:55|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!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="http://zxianf.blog.163.com/blog/#" onclick="saverow("+index+")">保存</a> ";
var c = "<a href="http://zxianf.blog.163.com/blog/#" onclick="cancelrow("+index+")">取消</a>";
return s+c;
}
else {
var e = "<a href="http://zxianf.blog.163.com/blog/#" onclick="editrow("+index+")">编辑</a> ";
var d = "<a href="http://zxianf.blog.163.com/blog/#" 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>

?-------------?博主签名------------?

一个人,只有当他的灵魂真正撼动了、刺痛了,他的智慧才可能被空前的发掘。人一旦变得清醒、理智起来,他就一步步靠近了成熟。 

from:http://www.mysjtu.com/page/M0/S546/546732.html

  评论这张
 
阅读(653)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017