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