简单配置url简化easyui的datagrid的增删查改的操作并实现多行编辑
easyui虽说是一个轻量级的前段js框架，但是在实现以下操作的时候有点复杂，而且大妈重复率大所以简单修改一下实现
全局默认错误响应。
$.ajaxSetup({
url:window.location.href,
error:function (XMLHttpRequest, textStatus, errorThrown){
var data=XMLHttpRequest.responseJSON
if(data){
$.messager.alert(errorThrown,+'errorCode:'+XMLHttpRequest.status+'<br />'+data.msg,'error');
}else{
$.messager.alert(errorThrown,+'errorCode:'+XMLHttpRequest.status+'<br />','error');
}
},
success:function(data, textStatus, jqXHR){
//console.log(data);
//console.log(textStatus);
//console.log(jqXHR);
//$.messager.progress('close');
showMsg(0,'请求成功');
}
});
一些常用的设置可以提前设置一下,放在初始化js文件里面
//全局默认配置
$.fn.datagrid.defaults.multiple=true;
$.fn.datagrid.defaults.fit=true;
$.fn.datagrid.defaults.pagination=true;
$.fn.datagrid.defaults.singleSelect=true;
$.fn.datagrid.defaults.checkOnSelect=false;
$.fn.datagrid.defaults.selectOnCheck=false;
$.fn.datagrid.defaults.sortName='id',
$.fn.datagrid.defaults.sortOrder='desc',
//$.fn.datagrid.defaults.rownumbers=true,
//保存编辑修改过的条目,用户实现多行编辑
$.fn.datagrid.defaults.edititem=[];
$.fn.datagrid.defaults.method='get';
//删除一行
$.fn.datagrid.methods.DelRows=function(jq){
var rows=jq.datagrid('getChecked');
if(rows.length==0){
$.messager.alert('提示','请选择数据');
}else{
$.messager.confirm('确认','您确认想要删除'+rows.length+'记录吗？',function(r){
if (r){
var delurl=jq.datagrid('options').delUrl;
var ids=[];
$.each(rows,function(i,n){
ids.push(n.id);
});
$.get(delurl,$.param({ids:ids},true),function(data){
showMsg(0,'操作成功');
setTimeout(function(){jq.datagrid('reload')},1500);
},'json');
}
});
}
};
//添加一行
$.fn.datagrid.methods.addRow=function(jq,row){
var options=jq.datagrid('options');
jq.datagrid('appendRow',row);
var editIndex=jq.datagrid('getRows').length-1;
jq.datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
};
//接受改变。 此处是在进行多行编辑的时候，结束多行编辑
$.fn.datagrid.methods.RecChange=function(jq,datas){
var options=jq.datagrid('options');
var rows=jq.datagrid('getRows');
$.each(options.edititem,function(i,n){
if(datas){
$.each(datas,function(key,value){
//console.log(key);
//console.log(n);
var ed=jq.datagrid('getEditor', {index:n,field: key});
if(ed){
rows[n][value] = $(ed.target).combo('getText');
}
//else{
//console.log('未找到编辑器 info:[index:'+n+'field:'+key+']');
//}
});
}
jq.datagrid('endEdit', n);
});
options.edititem=[];
};
//向服务器保存数据
$.fn.datagrid.methods.SaveData=function(jq,callback_){
//$.messager.progress();
var options=jq.datagrid('options');
var rows=jq.datagrid('getChanges');
var irows=jq.datagrid('getChanges','inserted');
var erows=jq.datagrid('getChanges','updated');
var drows=jq.datagrid('getChanges','deleted');
if(rows.length==0){
$.messager.show({
title:'提示',
msg:'没有被更改的数据',
timeout:5000,
showType:'slide'
});
return;
}
if(irows.length!=0){
$.ajax({
async:false,
url:options.saveUrl,
dataType:"json",
type:'POST',
data:JSON.stringify(irows),
contentType: "application/json;charset=utf-8"
});
}
if (erows.length!=0){
$.ajax({
async:false,
type:'POST',
url:options.editUrl,
dataType:"json",
data:JSON.stringify(erows),
contentType: "application/json;charset=utf-8"
});
}
if(drows.length!=0){
var ids=[];
$.each(drows,function(i,n){
ids.push(n.id);
});
$.get(options.delUrl,{ids:ids.join(',')},function(data){
},'json');
}
//回调
callback_&&callback_();
//重新载入数据
setTimeout(function(){jq.datagrid('reload')},1500);
};
//取消编辑
$.fn.datagrid.methods.CancelEdit=function(jq){
var options=jq.datagrid('options');
options.edititem=[];
jq.datagrid('rejectChanges');
};
设置完成后，在使用的时候可以这样来使用
$test_msg.datagrid({
url:'textmsg/list.json',
saveUrl:'textmsg/api?method=add',
editUrl: 'textmsg/api?method=update',
delUrl: 'textmsg/api?method=del',
columns:[[
{field:'ck',checkbox:true},
{field:'id',title:'MsgId'},
{field:'text',title:'内容',width:600,editor:{type:'textarea',options:{required:true}}},
{field:'time',title:'创建时间',formatter:function(value){
return new Date(value).toLocaleString();
}},
{field:'edittime',title:'修改时间',formatter:function(value){
return new Date(value).toLocaleString();
}}
]],
onBeforeEdit:function(rowIndex){
var edititem=$test_msg.datagrid('options').edititem;
edititem.push(rowIndex);
},
onDblClickRow:function(rowIndex){
$test_msg.datagrid('beginEdit', rowIndex);
},
toolbar:[
{
iconCls:'icon-add',
text:'添加',
handler:function(){
$test_msg.datagrid('addRow',{
"text": "新内容"
});
}
},
{
iconCls:'icon-save',
text:'接受改变',
handler:function(){
//多行编辑时候结束编辑，此时还没有保存到服务器
$test_msg.datagrid('RecChange');
}
},
{
iconCls:'icon-save',
text:'保存',
handler:function(){
//保存到服务器
$test_msg.datagrid('SaveData');
}
},
{
iconCls:'icon-cancel',
text:'取消更改',
handler:function(){
$test_msg.datagrid('CancelEdit');
}
},
{
iconCls:'icon-remove',
text:'删除选中行',
handler:function(){
$test_msg.datagrid('DelRows');
}
}
]
});
多行编辑效果
