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 相关文章推荐
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
vue实现记事本功能
Jun 26 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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
PHP4.04简明安装
2006/10/09 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
php生成静态文件的多种方法分享
2012/07/17 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
jquery中对表单的基本操作代码
2010/07/29 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python getopt 参数处理小示例
2009/06/09 Python
Python循环语句中else的用法总结
2016/09/11 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
python tornado微信开发入门代码
2018/08/24 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Python 从attribute到property详解
2020/03/05 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
违纪检讨书2000字
2014/02/08 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书