在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).用户也可以更新一个或多个行. 本 ...
随机推荐
- 2016-1-8 Quartz框架的学习，多个气球上升的小动画
// // BallonView.m // 气球上升的动画 // // Created by Mac on 16/1/8. // Copyright © 2016年 Mac. All rights r ...
- 在MyEclipse上搭建web服务器
a) Servlet是什么? Servlet(服务器端小程序)是使用Java语言编写的服务器端程序[o1] ,可以使用脚本语言,生成动态的web页. b) Servlet的架构? ...
- "无意义"的div和span标签
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...
- 关于我和Github不得不说的一些小事
你好,我叫黄雅婷,学号是1413042031,网络工程142班.因为小时候家里有很多课外书,有关神话和科学方面的杂志和书籍等,所以从小就喜欢看书,现在比较不挑,什么书都喜欢看,就是给我本字典,我也能看 ...
- AmazeUI HTML元素
按钮Button am-btn-xx(default.primary.secondary.success.warning.danger.link) am-radius 圆角按钮 am-round 椭圆 ...
- office2010安装Microsoft Office Document Imaging (MODI) 图解
office2010安装Microsoft Office Document Imaging (MODI) 图解 Microsoft Office 2010 中删除了 Microsoft Off ...
- iptables配置服务器端口转发
环境: CentOS6.5,192.168.1.10,外网双向通信,绑定域名zlzkj.org: WinServer2008,192.168.1.11,外网不能直接访问到该机器,但ftp.远程桌面.M ...
- 使用RBL拦截垃圾邮件
1. sbl-xbl.spamhaus.org 2 bl.spamcop.net 3 zen.spamhaus.org
- Unity3D ShaderLab 立方体图的菲涅尔反射
Unity3D ShaderLab 立方体图的菲涅尔反射 菲涅尔反射是反射类型中比较常见的一种类型,当我们的视线正对物体表面,那么反射量会明显增加, 我们几乎可以在任何支持反射类型的物体表面看到这种情 ...
- Howto add permanent static routes in Ubuntu
Static routing is the term used to refer to the manual method used to set up routing. An administrat ...