在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).用户也可以更新一个或多个行. 本 ...
随机推荐
- passivedns 安装指南
install passivedns on ubuntu Passive DNS对安全研究非常重要,因为它可以在前期帮助我们构建出目标的基础设施结构,并且可以得到以下三方面的答案:该域名曾经绑定过哪些 ...
- 【Zhejiang University PATest】02-1. Reversing Linked List
Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elem ...
- JQuery源码分析（七）
了解jQuery对DOM进行遍历背后的工作机制,这样可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能. 关于jQuery对象的包装 var $aaron = $("aar ...
- 破解 CrackMe#1 [UBC] by bRaINbuSY
系统 : Windows xp 程序 : CrackMe#1 程序下载地址 :http://pan.baidu.com/s/1nuagj6h 要求 : 编写注册机 使用工具 :IDA & OD ...
- Oracle修改字段类型方法总结（转）
有一个表名为tb,字段段名为name,数据类型nchar(20). 1.假设字段数据为空,则不管改为什么字段类型,可以直接执行:alter table tb modify (name nvarchar ...
- PHP Mail 简介
PHP mail() 函数用于从脚本中发送电子邮件. mail(to,subject,message,headers,parameters): 参数 描述 to 必需.规定 email 接收者. su ...
- PHP url重定向
1.使用header()函数 PHP的 HTTP相关函数种提供了一个 header()函数,首先要清楚,header()函数必须放在php程序的开头部分,而且之前不能有另外的 header() 函数或 ...
- Selenium - 封装WebDrivers (C#)
Web element仍然使用OpenQA.Selenium.IWebElement, 本类库将Selenium原装支持的各浏览器统一为OnDriver, 并将常用操作封装. using System ...
- mysql 日期 时间戳 转换
/***************************************************************************************** * mysql 日 ...
- 用提交按钮提交form问题验证没通过依然提交表单
<form id="sb" action="${pageContext.request.contextPath }/admin/loanContract/addOr ...