// 测试环境
/*$(function(){
alert($===jQuery);
$.messager.alert('提示','内容');
});*/
var editing; //判断用户是否处于编辑状态
$(function(){
$("#mydatagrid").datagrid({
title:'用户列表',
width:500,
height:'auto',
pagination:true,
pageList:[5,10,15,20],
pageNumber:2,
pageSize:10,
idField:'id',
fitColumns:true,
striped:true,
nowrap:true,
url:'../../userServlet?method=pageList&time='+new Date().getTime(),
columns:[[
{field:'id',title:'编号',width:100,hidden:true},
{field:'name',title:'名字',width:100,editor:{
type:'validatebox',
options:{required:true,missingMessage:'用户名不能为空!'}
}},
{field:'sex',title:'性别',width:100,editor:{
type:'combobox',
options:{
data:[{id:'男',val:'男'},{id:'女',val:'女'}],
valueField:'id',
textField:'val',
required:true,
missingMessage:'性别不能为空'
}
}},
{field:'birthdayStr',title:'出生日期',width:100,editor:{
type:'datebox',
options:{required:true,editable:false}
}},
{field:'hobby',title:'爱好',width:100,align:'center',editor:{
type:'validatebox',
options:{required:true,missingMessage:'爱好必填!'}
}}
]],
toolbar:[
{text:'新增',iconCls:'icon-add',handler:function(){
if(editing==undefined){
// 取消所有的选中的状态
$("#mydatagrid").datagrid('unselectAll');
// 追加一行
$("#mydatagrid").datagrid('appendRow',{});
// 获取当前页的行数
editing=$("#mydatagrid").datagrid('getRows').length-1;
// 开启编辑状态
$('#mydatagrid').datagrid('beginEdit',editing);
}
}},
{text:'编辑',iconCls:'icon-edit',handler:function(){
var array=$('#mydatagrid').datagrid('getSelections');
if(array.length!=1){
$.messager.alert('内容','只能编辑一行!');
}else{
if(editing==undefined){
//根据行记录对象获取该行的索引位置
editing=$('#mydatagrid').datagrid('getRowIndex',array[0]);
// 开启编辑状态
$('#mydatagrid').datagrid('beginEdit',editing);
}
}
}},
{text:'保存',iconCls:'icon-save',handler:function(){
//保存之前进行数据的校验 , 然后结束编辑并释放编辑状态字段
if($('#mydatagrid').datagrid('validateRow',editing)){
$('#mydatagrid').datagrid('endEdit',editing);
editing=undefined;
}
}},
{text:'移除',iconCls:'icon-remove',handler:function(){removeUser();}},
{text:'取消操作',iconCls:'icon-cancel',handler:function(){
// 回滚数据
$('#mydatagrid').datagrid('rejectChanges');
editing=undefined;
}}
],
onAfterEdit:function(rowIndex,rowData,changes){
$.post('../../userServlet?method=edit',rowData,function(result){
$('#mydatagrid').datagrid('unselectAll');
$('#mydatagrid').datagrid('reload');
$.messager.show({
title:'系统提示',
msg:result,
timeout:3000,
showType:'slide'
});
});
}
});
});
function removeUser(){
var model=$('#mydatagrid').datagrid('getSelected');
if(model){
$.messager.confirm('系统提示','您确定要删除数据吗?',function(r){
$.post('../../userServlet?method=delete',{id:model.id},function(result){
$("#mydatagrid").datagrid('unselectAll');
$('#mydatagrid').datagrid('reload');
$.messager.show({
title:'系统提示',
msg:result,
timeout:3000,
showType:'slide'
});
});
});
}else{
$.messager.show({
title:'系统提示',
msg:'请先选择要删除的数据',
timeout:3000,
showType:'slide'
});
}
}
分享到:
相关推荐
"easyui-crud-demo" 是一个使用 jQuery EasyUI 实现的CRUD(创建、读取、更新、删除)操作的示例项目。这个项目涵盖了从数据获取、展示到用户交互的核心功能,下面我们将详细解析其关键知识点。 1. **jQuery EasyUI...
2. **CSS 样式与主题**:EasyUI 默认提供了多种主题,可以快速改变应用的整体视觉风格。在 demo 中,我们将看到如何应用和自定义这些主题,以满足特定的设计需求。 3. **jQuery 集成**:EasyUI 是基于 jQuery 构建...
这个**Demo**展示了如何在MVC4.0项目中集成EasyUI,实现基本的CRUD功能。开发者可能通过以下步骤实现: 1. **创建控制器**:创建对应的控制器类,比如`StudentController`,每个操作(CRUD)对应一个方法。 2. **...
easyui\easyui-crud-demo.zip easyui\easyui-datagrid10-demo.zip easyui\easyui-datagrid11-demo.zip easyui\easyui-datagrid12-demo.zip easyui\easyui-datagrid13-demo.zip easyui\easyui-datagrid14-demo.zip ...
【标题】"crud-demo_easyui增删查改_zip_" 指的是一个使用EasyUI框架实现的CRUD(Create, Read, Update, Delete)操作演示项目,被压缩为ZIP格式的文件。CRUD是数据库操作的基本功能,代表创建、读取、更新和删除...
在 "easyui-crud-demo.zip" 这个压缩包中,我们可以看到一个使用 EasyUI 和 PHP 实现的简单 CRUD(创建、读取、更新、删除)操作示例。这个示例非常实用,尤其对于初学者来说,是理解如何结合前端与后端进行数据交互...
SSH和EasyUI整合是Web开发中的一个重要实践,它将Struts2、Spring和Hibernate这三大流行框架与EasyUI前端框架相结合,以实现高效、模块化的应用程序。在这个整合Demo中,我们能够看到如何将这些组件有效地集成在一起...
2. **数据的增删改查**:EasyUI与后端数据交互时,通常会结合`datagrid`组件。`datagrid`不仅可以展示数据,还可以提供编辑、添加、删除和搜索等功能。在这个实例中,`datagrid`可能被用来显示数据库中的数据,并...
Spring JDBC或iBATIS可以与MySQL进行交互,提供数据的CRUD操作。 【EasyUI】 EasyUI是基于jQuery的前端UI框架,主要用于快速构建美观的管理界面。它提供了一系列预先设计好的组件,如表格、表单、对话框、菜单、树...
标题“mvc easyui 项目 demo 增删改查”表明这是一个基于MVC(Model-View-Controller)框架和EasyUI库的Web应用示例,主要功能集中在基本的数据操作:增加、删除、修改和查询。这个项目可能是为了帮助初学者理解如何...
"SpringMVC+Spring Data JPA+Shiro+EasyUI 简单demo"是一个整合了上述四个技术的Web应用示例。这个项目可能包含了以下组件: 1. **配置文件**:如`applicationContext.xml`用于配置SpringMVC和Spring Data JPA,...
2. **级联(Cascading)**:在EasyUI中,级联通常指的是下拉框或树形控件的联动效果。比如,当选择一个国家时,相应的省份下拉框会自动填充对应国家的省份数据,这种联动可以实现更精细化的数据筛选。 3. **...
【标题】"easyui+三层+json增删改查DEMO"是一个基于EasyUI前端框架,结合三层架构和JSON数据格式实现的Web应用程序示例,主要用于演示如何在实际项目中进行CRUD(创建、读取、更新、删除)操作。这个DEMO涵盖了...
2. **表单操作**:EasyUI的Form组件可与后台进行数据交换,支持创建、编辑和删除操作。Java后端可能使用了Spring MVC或Spring Boot框架,处理HTTP请求,执行CRUD(创建、读取、更新、删除)操作,并返回相应的状态...
在DEMO中,MyBatis用于数据库操作,通过XML或注解定义SQL语句,与SpringMVC配合实现数据的CRUD操作。 4. EasyUI: EasyUI是一个基于jQuery的UI组件库,主要用于构建桌面级的Web应用界面。它提供了一系列的UI组件,...
在通讯录Demo中,Hibernate用于将Contact对象映射到数据库表,实现了数据库的CRUD(Create、Read、Update、Delete)操作。通过编写简单的HQL(Hibernate Query Language)或使用Criteria API,我们可以方便地执行...
标题中的".NET_MVC_CORE_EasyUI_login_ADD_EDIT_DELETE.demo.rar"表明这是一个使用.NET MVC Core框架结合EasyUI库实现登录功能以及数据的添加、编辑和删除操作的演示项目压缩包。这个实例通常是为了帮助开发者理解...
数据的`增删查改`(CRUD操作)是任何管理系统的核心功能。在EasyUI中,可以使用`datagrid`组件展示数据,它具有分页、排序、过滤等功能,同时支持行级别的操作按钮,如新增、编辑、删除。这些操作通常会触发AJAX请求...
【标题】"springboot+mybatis+easyui增删改查分页Demo"是一个基于Spring Boot、MyBatis和EasyUI实现的Web应用程序示例,主要用于演示如何在这些技术栈中进行基本的数据操作,如添加(Add)、删除(Delete)、修改...