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


Posted in Javascript onJune 10, 2010

效果图:
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:'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>
Javascript 相关文章推荐
javascript异步处理工作机制详解
Apr 13 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 #Javascript
jQuery-ui中自动完成实现方法
Jun 10 #Javascript
Array.prototype.slice 使用扩展
Jun 09 #Javascript
Confirmer JQuery确认对话框组件
Jun 09 #Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 #Javascript
JavaScript 原型与继承说明
Jun 09 #Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 #Javascript
You might like
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
jquery对dom的操作常用方法整理
2013/06/25 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
使用Vue构建可重用的分页组件
2018/03/26 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python去除列表中重复元素的方法
2015/03/20 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python实战教程之自动扫雷
2018/07/13 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
python关于倒排列的知识点总结
2020/10/13 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
介绍Java的内部类
2012/10/27 面试题
超市收银员岗位职责
2015/04/07 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
MySQL插入数据与查询数据
2022/03/25 MySQL