jQueryEasyUi行编辑打造增删改查

/article/3978301.html

jQueryEasyUi行编辑打造增删改查

博客分类：

jQueryEasyUi

问题：

直接删除后，已删除行下面所有行的Index可能不正确，所以我的解决方法是新增时定义一个当前时间Id，然后每次点击后面的操作按钮时，jQuery获取当前行Id，然后selectRecord获得当前行真实Index

注意：需为Datagrid定义IdField，否则selectRecord不会起作用，很坑爹的问题...



Java代码


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);

}

Java代码


/*

* 全局设置

*/

@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;

}

Java代码


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 可编辑表格的保存方法

Java代码


{

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 中表格的行编辑功能

学习Jquery EasyUI的添加，修改，删除，查询等基本操作

JQueryEasyUI学习笔记（十）datagrid 添加、修改、删除

jquery-easyui中表格的行编辑功能(javaeye)

jQuery Easyui的datagrid可编辑，多列之间的级联操作

当Product Id列的值改变的时候，把当前列List Price的值设置成2012.

Java代码


{

field : 'productid',

title : 'Product ID',

width : 120,

formatter : productFormatter,

editor : {

type : 'combobox',

options : {

valueField : 'productid',

textField : 'name',

data : products,

required : true,

onChange : function (newValue, oldValue) {

//重点在此处

//先获取到当前选中行

//根据当前行获取，当前行的下标

//在根据下标和要获取列的filed获取对应filed的Editor对象

//然后在根据对应的Editor操作

var row = $dg.datagrid('getSelected');

var rindex = $dg.datagrid('getRowIndex', row);

var ed = $dg.datagrid('getEditor', {

index : rindex,

field : 'listprice'

});

$(ed.target).numberbox('setValue', '2012');

}

}

}

。。