问题：
直接删除后，已删除行下面所有行的Index可能不正确，所以我的解决方法是新增时定义一个当前时间Id，然后每次点击后面的操作按钮时，jQuery获取当前行Id，然后selectRecord获得当前行真实Index
注意：需为Datagrid定义IdField，否则selectRecord不会起作用，很坑爹的问题...
var $obj;
$(function() {
$obj = $("#configQueryGrid");
$obj.datagrid({
loadMsg : '数据加载中请稍后……',
url : root + 'esbService/sysConfigQuery.do',
//url : root + 'js/app/sysManagement/sysConfig.json',
fitColumns : true,
autoRowHeight : true,
pagination : true,
pagePosition : 'bottom',
pageSize : 10,
toolbar: '#configTb',
pageList : [ 10, 20, 30 ],
border : false,
singleSelect:true,
idField:'id',
columns : [ [ {
field : 'id',
title : 'ID',
hidden : true
},{
field : 'configName',
title : "标识",
width : 200,
editor : 'text',
sortable : true
}, {
field : 'configNameCn',
title : "名称",
editor : 'text',
width : 200,
sortable : true
}, {
field : 'configType',
title : "类型",
editor : 'text',
width : 200,
sortable : true
}, {
field : 'configValue',
title : "值",
editor : 'text',
width : 200,
sortable : true
}, {
field : 'opt',
title : "详情",
width : 150,
align : 'center',
formatter:function(value,row,index){
if (row.editing){
var s = '<a href="#" class="ope-save" onclick="saverow('+index+',this)">保存</a> ';
var c = '<a href="#" class="ope-cancel" onclick="cancelrow('+index+',this)">取消</a>';
return s+c;
} else {
var e = '<a href="#" class="ope-edit" onclick="editrow('+index+',this)">修改</a> ';
var d = '<a href="#" class="ope-remove" onclick="deleterow('+index+',this)">删除</a>';
return e+d;
}
}
} ] ],
onLoadSuccess : function(data) {
},
onBeforeEdit:function(index,row){
row.editing = true;
$obj.datagrid('refreshRow', index);
},
onAfterEdit:function(index,row){
row.editing = false;
$obj.datagrid('refreshRow', index);
},
onCancelEdit:function(index,row){
row.editing = false;
$obj.datagrid('refreshRow', index);
}
});
});
function selectCurRow(obj){
var $a = $(obj);
var $tr = $a.parent().parent().parent();
var tmpId = $tr.find("td:eq(0)").text();
$obj.datagrid('selectRecord', tmpId);
}
function getIndexAfterDel(){
var selected = $obj.datagrid('getSelected');
var index = $obj.datagrid('getRowIndex', selected);
return index;
}
function editrow(index,obj){
selectCurRow(obj);
var tmpIndex = getIndexAfterDel();
$obj.datagrid('beginEdit', tmpIndex);
}
function deleterow(index,obj){
$.messager.confirm('Confirm','确认删除?',function(r){
if (r){
selectCurRow(obj);
var index = getIndexAfterDel();
var node = $obj.datagrid('getSelected');
var id = node.id;
$.ajax({
url : root + 'esbService/removeSysConfig.do?id='+id,
type : 'GET',
timeout : 60000,
success : function(data, textStatus, jqXHR) {
var msg = '删除';
if(data == 'pageData') {
$obj.datagrid('deleteRow', index);
return;
}else if (data == "success") {
$obj.datagrid('deleteRow', index);
//$obj.datagrid('reload');
$.messager.alert('提示', msg + '成功！', 'info', function() {
//window.location.href = root + 'esbService/initSysConfig.do';
});
} else {
$.messager.alert('提示', msg + '失败！', 'error', function() {
//window.location.href = root + 'esbService/initSysConfig.do';
});
}
}
});
}
});
}
function saverow(index,obj){
selectCurRow(obj);
var tmpIndex = getIndexAfterDel();
$obj.datagrid('endEdit', tmpIndex);
var node = $obj.datagrid('getSelected');
//var data = JSON.stringify(node);
var json = {};
json.id = node.id;
json.configName = node.configName;
json.configNameCn = node.configNameCn;
json.configType = node.configType;
json.configValue = node.configValue;
$.ajax({
url : root + 'esbService/editOrSaveSysConfig.do',
type : 'POST',
data : json,
timeout : 60000,
success : function(data, textStatus, jqXHR) {
var msg = '';
if (data == "success") {
$.messager.alert('提示', '保存成功！', 'info', function() {
$obj.datagrid('refreshRow', tmpIndex);
});
} else{
if(data == "illegal"){
msg = "请输入数据！";
}else if(data == "duplicate"){
msg = "该标识已存在！";
}else{
msg = "保存失败！";
}
$.messager.alert('提示', msg , 'error', function() {
$obj.datagrid('beginEdit', tmpIndex);
});
}
}
});
}
function cancelrow(index,obj){
selectCurRow(obj);
var tmpIndex = getIndexAfterDel();
$obj.datagrid('cancelEdit', tmpIndex);
}
function appendRow(){
$obj.datagrid('appendRow',{
id: new Date().getTime(),
configName: '',
configNameCn: "",
configType: "",
configValue:"",
opt:""
});
var length = $obj.datagrid("getRows").length;
if(length > 0){
editIndex = length - 1;
}else{
editIndex = 0;
}
//$obj.datagrid("selectRow", editIndex);
$obj.datagrid("beginEdit", editIndex);
}
/*
* 全局设置
*/
@RequestMapping(value = "esbService/editOrSaveSysConfig.do", method = RequestMethod.POST)
@ResponseBody
public String editOrSaveSysConfig(SysConfig sysConfig) {
if(sysConfig == null) return null;
String message = "";
try{
message = sysConfigDS.editOrSaveSysConfig(sysConfig);
}catch(Exception e){
return "fail";
}
return message;
}
@RequestMapping(value = "esbService/removeSysConfig.do", method = RequestMethod.GET)
@ResponseBody
public String removeSysConfig(@RequestParam Long id) {
if(id == null) return null;
SysConfig es = sysConfigDS.getSysConfigById(id);
String message = "";
if(null != es){
try{
sysConfigDS.remove(id);
message = "success";
}catch(Exception e){
return "fail";
}
}else{
message = "pageData";
}
return message;
}
public Boolean isIllegalData(SysConfig sys){
if(StringUtils.isBlank(sys.getConfigName())
|| StringUtils.isBlank(sys.getConfigType())
|| StringUtils.isBlank(sys.getConfigValue())){
return true;
}
return false;
}
public Boolean checkSysConfigExist(String name){
SysConfig es = getSysConfigByName(name.trim());
if(es != null) return true;
return false;
}
@Override
@Transactional
public String editOrSaveSysConfig(SysConfig sysConfig) {
SysConfig es = getSysConfigById(sysConfig.getId());
String message = "";
if(isIllegalData(sysConfig)){
message = "illegal";
}else{
if(null == es){//判断是否新增
if(checkSysConfigExist(sysConfig.getConfigName())){
message = "duplicate";
}else{
sysConfig.setId(null);
save(sysConfig);
message = "success";
}
}else{//更新
SysConfig dbEs = getSysConfigByName(sysConfig.getConfigName().trim());
if(checkSysConfigExist(sysConfig.getConfigName())
&& es.getId() != dbEs.getId()){
message = "duplicate";
}else{
update(sysConfig);
message = "success";
}
}
}
return message;
}
That's all .
Jquery easyui 可编辑表格的保存方法
{
id : 'btnsave',
text : '保存',
disabled : true,
iconCls : 'icon-save',
handler : function() {
if (lastEditIndex != undefined) {
$('#tt').datagrid('endEdit', lastEditIndex);
}
var insertRows = $('#tt').datagrid('getChanges','inserted');
var updateRows = $('#tt').datagrid('getChanges','updated');
var deleteRows = $('#tt').datagrid('getChanges','deleted');
var changesRows = {
inserted : [],
updated : [],
deleted : [],
};
if (insertRows.length>0) {
for (var i=0;i<insertRows.length;i++) {
delete insertRows[i].editing;
changesRows.inserted.push(insertRows[i]);
}
}
if (updateRows.length>0) {
for (var k=0;k<updateRows.length;k++) {
delete updateRows[k].editing;
changesRows.updated.push(updateRows[k]);
}
}
if (deleteRows.length>0) {
for (var j=0;j<deleteRows.length;j++) {
delete deleteRows[j].editing;
changesRows.deleted.push(deleteRows[j]);
}
}
alert(JSON.stringify(changesRows));
// 保存成功后，可以刷新页面，也可以：
$('#tt').datagrid('acceptChanges');
// 并且禁止保存、还原按钮
$('#btnsave').linkbutton('disable');
$('#btnreject').linkbutton('disable');
}
}
JQuery EasyUI datagrid 批量编辑和提交
参考：
学习Jquery EasyUI的添加，修改，删除，查询等基本操作
JQueryEasyUI学习笔记（十）datagrid 添加、修改、删除
jquery-easyui中表格的行编辑功能(javaeye)
相关推荐
本文将深入探讨如何利用联表查询进行数据的增删改查，并结合EasyUI创建用户友好的界面，提升工作效率。 首先，我们要理解什么是联表查询。在SQL语言中，联表查询（也称为JOIN查询）允许我们从多个相关表中检索数据...
4. **表单（Form）**：用于数据输入和验证，可与表格结合使用，实现数据的增删改查。 5. **菜单（Menu）**：创建下拉或级联菜单，便于组织和访问功能项。 6. **按钮（Button）**：包括普通按钮、复选按钮、单选按钮...
6. **表单(Form)**：用于收集用户输入，可以和Grid配合实现数据的增删改查。 7. **窗口(Window)**：类似对话框，但更加灵活，可以自由移动和调整大小。 8. **布局(Layout)**：提供了分割面板，可以将页面划分为多...
通过绑定数据源，可以轻松实现数据的增删改查。 3. 菜单（Menu） 菜单组件允许开发者创建多级下拉菜单，方便用户进行导航操作。它可以与按钮、链接等元素结合，提供丰富的交互体验。 4. 表单（Form） 表单组件...
例如，开发者可以通过简单的配置实现数据的增删改查，同时可以定制化列宽、行样式等，提升用户体验。 3. **Tree组件** Tree 组件是用于展示层次结构数据的工具，常用于组织结构、目录结构等场景。在 jQuery EasyUI...
5. **Form（表单）**：处理表单数据，与DataGrid结合使用，可实现数据的增删改查。 6. **其他组件**：如Layout（布局）、Accordion（手风琴）、Panel（面板）等，丰富了页面构建的可能性。 **API 使用指南** ...
2. **表格（Grid）**：用于展示大量数据，支持分页、排序、过滤和编辑，可以轻松实现数据的增删改查操作。 3. **表单（Form）**：提供了各种输入控件，如文本框、下拉列表、复选框和单选按钮，支持验证和提交，方便...
3. **表格（Grid）**：强大的数据展示工具，具备分页、排序、过滤、编辑等功能，能够与后台数据库无缝对接，实现数据的增删改查操作。 4. **菜单（Menu）**：构建多级下拉菜单，便于用户导航，同时支持鼠标悬停效果...
2. **数据的增删改查**：EasyUI与后端数据交互时，通常会结合`datagrid`组件。`datagrid`不仅可以展示数据，还可以提供编辑、添加、删除和搜索等功能。在这个实例中，`datagrid`可能被用来显示数据库中的数据，并...
9. **具体实践**：开发者可以通过模拟登录注册、数据展示、增删改查等常见功能来实践SSM+EasyUI的整合。例如，创建一个用户管理模块，使用EasyUI的表格组件显示用户列表，使用表单组件进行用户信息编辑，后台使用SSM...
通过以上介绍，我们可以看到MVC和EasyUI结合使用可以高效地实现Web应用的增删改查功能，同时保持代码结构清晰，易于维护。在实际开发中，还需要考虑性能优化、用户体验、前后端分离等因素，以打造高质量的应用。
Form组件可以方便地处理表单数据，支持各种验证规则，与DataGrid配合可以实现数据的增删改查。通过`validatebox`可以对表单元素进行验证。 7. **主题和样式定制** EasyUI 提供了多种预设主题，如默认的"easyui"、...
开发者可以通过简单的配置实现数据的增删改查操作，同时，它还支持异步加载数据，提高用户体验。 2. **表单组件（form）**：EasyUI的表单组件能够轻松地处理用户输入，支持各种验证规则，可以与后台服务进行数据...
在学生信息管理系统中，Hibernate简化了数据操作，使得对数据库的增删改查变得更加简单，同时也保证了数据的一致性和完整性。 再者，Spring3是全面的Java应用开发框架，它的核心特性包括依赖注入（DI）和面向切面...
技术点五：Online Coding在线开发(通过在线配置实现一个表模型的增删改查功能，无需一行代码，支持用户自定义表单布局) 技术点六：代码生成器，支持多种数据模型，根据表生成对应的Entity，Service，Dao，Action，...
Online Coding在线开发(通过在线配置实现一个表模型的增删改查功能，无需一行代码，支持用户自定义表单布局)技术点六：代码生成器，支持多种数据模型，根据表生成对应的Entity，Service，Dao，Action，JSP等，增删改...