jQueryEasyUi行编辑打造增删改查
问题：
直接删除后，已删除行下面所有行的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中表格的行编辑功能(javaeye)相关推荐
89427412 2020-02-13
morexyoung 2019-12-20
EdwardSiCong 2015-04-11
ningwentao 2015-10-21
zderam的私人 2019-09-02
shanhuijava 2016-08-17
wndong 2016-03-04
AngelicaA 2015-12-22
xiaobozhu 2015-10-27
yypiao 2015-10-21
小策一喋 2015-09-17
小仙儿 2015-06-15
huzai 2015-06-03
huzai 2015-04-22
zhangmingming 2015-03-11
大数据实战派 2015-02-04
葉無聞 2015-01-01
sunnylinner 2014-12-19