!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>
分享到：
相关推荐
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jquery-easyui-1.2.2jquery-easyui-1.2.2jquery-easyui-1.2.2
《jQuery EasyUI 1.7.0：打造高效前端界面的利器》 jQuery EasyUI 是一个基于 jQuery 的轻量级框架，它为开发者提供了一系列组件，使得构建交互式、响应式的Web应用程序变得更加简单。在1.7.0版本中，这个强大的...
《jQuery EasyUI 主题详解与应用》 jQuery EasyUI 是一款基于 jQuery 的前端框架，它提供了丰富的组件和易于使用的API，极大地简化了Web界面的开发。而其核心魅力之一，便是丰富的主题系统，使得开发者可以轻松定制...
EasyUI 是一个基于 jQuery 的轻量级前端框架，它为开发者提供了一系列的组件和插件，使得构建交互式用户界面变得更加便捷。这个压缩包“jquery-easyui.zip”包含了使用 EasyUI 实现的一个HTML框架，它主要用于简化...
`jQuery EasyUI` 是一个基于 jQuery 的前端框架，它提供了丰富的用户界面组件，使得开发者能够快速构建出功能完备、交互友好的Web应用。这个`jquery-easyui-1.3.5`版本是该框架的一个特定发行版，下面将详细介绍这个...
jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解...
教程名称：超实用的jQuery-EasyUI视频教程（30集）课程目录：【】jQuery-EasyUI视频教程（01-02集）【】jQuery-EasyUI视频教程（03-04集）【】jQuery-EasyUI视频教程（05-06集）【】jQuery-EasyUI视频教程（07-08集...
easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui...
《jQuery EasyUI 1.2.3：轻松构建高效用户界面》 jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的组件和便捷的API，用于快速开发出具有专业外观和交互体验的Web应用程序。标题中的 "Jquery-Easyui-...
该资源为jquery-easyui-1.5.5版本，包含easyui插件所依赖的js和css
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的用户界面组件，如表格、对话框、菜单、按钮等，大大简化了Web应用程序的开发。在"jquery-easyui-1.5完整源码.zip"这个压缩包中，包含了EasyUI 1.5版本的...
jquery-easyui-themes,easyui主题包，包含metro-blue metro-gray metro-green metro-orange metro-red ui-cupertino ui-dark-hive ui-pepper-grinder ui-sunny这些主题，具体的php使用方式见：...
《jQuery EasyUI 全面解析与实战应用》 jQuery EasyUI 是一款基于 jQuery 的前端框架，它提供了一系列的预定义的 CSS 样式和 JavaScript 插件，使得开发者能够快速构建用户界面，大大提升了开发效率。这个“jquery-...
jQuery EasyUI 是一个基于 jQuery 的轻量级前端框架，它提供了一系列易于使用的组件，如表格、下拉菜单、对话框等，极大地简化了网页的用户界面开发。在这款名为 "jquery-easyui-EDT-1.4-build1-附带各种主题" 的...
《jQuery EasyUI 1.3.2 Demo：深入解析与应用》 jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了丰富的用户界面组件，极大地简化了网页开发过程。本篇文章将详细探讨 "jquery-easyui-1.3.2 demo"，即官方...
该文件中含有jquery-easyui 开发使用实例demo 及 jquery.easyui.min.js、jquery-1.8.0.min.js文件 ，以及EasyUI-1.3.2+中文版API，个人觉得在WEB开发的时候挺实用的，希望能方便大家
在“jquery-easyui-EDT-1.5.5”扩展中，EDT（Enhanced Data Table）是EasyUI的一个增强版表格组件，它提供了更强大的数据处理能力，如分页、排序、过滤和自定义操作等功能。这使得开发者在处理大量数据时能更加...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，帮助开发者快速构建用户界面。这个压缩包“jquery-easyui-1.5.5.6”包含了该框架的1.5.5.5版本，这是一份重要的更新，可能包含了一些...