在jQuery EasyUI中实现对DataGrid进行编辑
<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中实现对DataGrid进行编辑的更多相关文章
- JQuery EasyUI中datagrid的使用
在学习过程中,可以参照JQuery EasyUI的官方网站学习.地址:http://www.jeasyui.com/demo/main/index.php 在学习JQuery EasyUI中的Data ...
- 在应用程序中实现对NandFlash的操作
以TC58NVG2S3ETA00 为例: 下面是它的一些物理参数: 图一 图二 图三 图四 图五 图6-0 图6-1 说明一下,在图6-1中中间的那个布局表可以看做是实际的NandFlash一页数据的 ...
- C++中实现对map按照value值进行排序 - 菜鸟变身记 - 51CTO技术博客
C++中实现对map按照value值进行排序 - 菜鸟变身记 - 51CTO技术博客 C++中实现对map按照value值进行排序 2012-03-15 15:32:36 标签:map 职场 休闲 排 ...
- Jquery EasyUI中treegrid
Jquery EasyUI中treegrid的中右键菜单和一般按钮同时绑定事件时的怪异事件 InChatter系统开源聊天模块前奏曲 最近在研究WCF,又因为工作中的项目需要,要为现有的系统增加一 ...
- Android平台中实现对XML的三种解析方式
本文介绍在Android平台中实现对XML的三种解析方式. XML在各种开发中都广泛应用,Android也不例外.作为承载数据的一个重要角色,如何读写XML成为Android开发中一项重要的技能. 在 ...
- jquery easyUI中combobox的使用总结
jquery easyUI中combobox的使用总结 一.如何让jquery-easyui的combobox像select那样不可编辑?为combobox添加editable属性 设置为false ...
- 求助关于jquery easyUI中的treegrid组件，请各位帮忙给个思路，谢谢啦
现在项目中用到jquery easyUI中的treegrid组件,已经可以正常显示了.但是在保存的时候遇到问题,页面上参照官网的例子可以在页面更新,但是怎么获取编辑后的数据进而保存到数据库呢?
- Python中实现对list做减法操作介绍
Python中实现对list做减法操作介绍 这篇文章主要介绍了Python中实现对list做减法操作介绍,需要的朋友可以参考下 问题描述:假设我有这样两个list, 一个是list1,list1 = ...
- 雷林鹏分享：jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
随机推荐
- myEclipse下安装SVN插件
step1.首先下载svn插件, step2.将下载下来的插件解压缩任意目录,找到里面的features 和plugins两个文件夹, step3.在myEclipse的安装目录下找到dropins文 ...
- C++数据结构之Queue（队列）
Queue,队列,和我们日常生活中的队列是同样的规则,"先进先出",从尾入,从首出. Queue,主要有三种基本操作,append(添加元素至队尾):serve(队首元素出列):r ...
- 一、XML语法
xml声明xml指令:<? ?>xml编码与乱码xml元素(标签)CDATA区空格与换行会被认为是标签的内容xml-stylesheet指令解析xml内容 <?xml version ...
- Emacs常用命令
1.离开Emacs 挂起Emacs C-z 退出Emacs C-x C-c 2.文件 打开文件 C-x C-f 保存文件 C-x C-s 保存所有的文件 C-x s 将一个文件的内容插入到当前buff ...
- [图论]Dijkstra 算法小结
Dijkstra 算法小结 By Wine93 2013.11 1. Dijkstra 算法相关介绍 算法阐述:Dijkstra是解决单源最短路径的算法,它可以在O(n^2)内计算出源点(s)到图中 ...
- WCF寻址
1.如果在<System.ServiceModel>.<Services>.<Service>.<host>.<baseaddress>定义 ...
- mysql 获得当前月1号的日期 和 0点日期方法
day)) 当月0点时间:2015-12-01 00:00:00 day)) 当月1号时间:2015-12-01 10:45:22 day) 2015-12-01 <!-- 查询上月债权额度 - ...
- CentOS 7.0 安装go 1.3.1
1.下载go安装包 golang中国上下载 2. 解压 tar -zxf go1.3.1.linux-amd64.tar.gz -C /usr/local/ 3. 修改 etc/profile 文件在 ...
- <转>windows下安装redis
1.redis简介redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(so ...
- hdu 4248 A Famous Stone Collector
首先发现一个很头痛的问题,下面是2个求排列组合的代码 memset(C,,sizeof(C)); ;i<;i++) { C[i][]=; ;j<=;j++) C[i][j]=(C[i-][ ...