EasyUI中的dataGrid的行内编辑
这个js代码是别人写的，可能不是最好的，但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了，这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单，这里就不贴了。前台效果图因为比较懒，也不贴了。
$(function(){
vardatagrid;//定义全局变量datagrid
vareditRow=undefined;//定义全局变量：当前编辑的行
datagrid=TskupluAddPacket.datagrid({
url:ThinkPHP['MODULE']+'/Tskuplu/getPacketList',//请求的数据源
iconCls:'icon-save',//图标
pagination:true,//显示分页
pageSize:15,//页大小
pageList:[15,30,45,60],//页大小下拉选项此项各value是pageSize的倍数
fit:true,//datagrid自适应宽度
fitColumn:false,//列自适应宽度
striped:true,//行背景交换
nowap:true,//列内容多时自动折至第二行
border:false,
idField:'packetid',//主键
sortName:'packetid',//排序字段
sortOrder:'desc',//排序方式
columns:[[//显示的列
{field:'packetid',title:'ID',width:100,sortable:true,checkbox:true},
{field:'packunit',title:'包装单位',width:100,sortable:true,
editor:{type:'validatebox',options:{required:true}}
},
{field:'packqty',title:'包装细数',width:100,
editor:{type:'validatebox',options:{required:true}}
},
{field:'packspec',title:'包装规格',width:100,
editor:{type:'validatebox',options:{required:true}}
}
]],
queryParams:{
pluid:$('#addpluid').val()
},//查询参数
toolbar:[{text:'添加',iconCls:'icon-add',handler:function(){//添加列表的操作按钮添加，修改，删除等
//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
if(editRow==undefined){
datagrid.datagrid("insertRow",{
index:0,//indexstartwith0
row:{}
});
//将新插入的那一行开户编辑状态
datagrid.datagrid("beginEdit",0);
//给当前编辑的行赋值
editRow=0;
}
}
},'-',
{text:'删除',iconCls:'icon-remove',
handler:function(){
//删除时先获取选择行
varrows=datagrid.datagrid("getSelections");
//选择要删除的行
if(rows.length>0){
$.messager.confirm("提示","你确定要删除吗?",function(r){
if(r){
varids=[];
for(vari=0;i0){
datagrid.datagrid('reload');
$.messager.show({
title:'操作提醒',
msg:data+'条数据被成功删除！'
})
}elseif(data==-999){
$.messager.alert('删除失败','对不起，您没有权限！','warning');
}else{
$.messager.alert('删除失败','没有删除任何数据！','warning');
}
}
});
}
});
}else{
$.messager.alert("提示","请选择要删除的行","error");
}
}
},'-',
{text:'修改',iconCls:'icon-edit',
handler:function(){
//修改时要获取选择到的行
varrows=datagrid.datagrid("getSelections");
//如果只选择了一行则可以进行修改，否则不操作
if(rows.length==1){
//当无编辑行时
if(editRow==undefined){
//获取到当前选择行的下标
varindex=datagrid.datagrid("getRowIndex",rows[0]);
//开启编辑
datagrid.datagrid("beginEdit",index);
//把当前开启编辑的行赋值给全局变量editRow
editRow=index;
//当开启了当前选择行的编辑状态之后，
//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
datagrid.datagrid("unselectAll");
}
}
}
},'-',
{text:'保存',iconCls:'icon-save',
handler:function(){
//保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
datagrid.datagrid("endEdit",editRow);
editRow=undefined;
}
},'-',
{text:'取消编辑',iconCls:'icon-redo',
handler:function(){
//取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
editRow=undefined;
datagrid.datagrid("rejectChanges");
datagrid.datagrid("unselectAll");
}
},'-'],
onAfterEdit:function(rowIndex,rowData,changes){
//endEdit该方法触发此事件
//varrow=datagrid.datagrid("getData").rows[rowIndex];//获取某一行的值
varinserted=datagrid.datagrid('getChanges','inserted');
varupdated=datagrid.datagrid('getChanges','updated');
if(inserted.length<1&&updated.length<1){
editRow=undefined;
datagrid.datagrid('unselectAll');
return;
}
varurl='';
if(inserted.length>0){
url=ThinkPHP['MODULE']+'/Tskuplu/addPacket';
}
if(updated.length>0){
url=ThinkPHP['MODULE']+'/Tskuplu/updatePacket';
}
$.ajax({
url:url,
type:'POST',
data:{
'pluid':$('#addpluid').val(),
'packetid':rowData.packetid,
'packunit':rowData.packunit,
'packqty':rowData.packqty,
'packspec':rowData.packspec
},
beforeSend:function(){
$.messager.progress({
text:'正在处理中...'
})
},
success:function(data){
$.messager.progress('close');
if(data>0){
datagrid.datagrid("acceptChanges");
$.messager.show({
title:'操作提示',
msg:'添加成功'
});
editRow=undefined;
datagrid.datagrid("reload");
$('#addcheck').val(1);
}elseif(data==-999){
$.messager.alert('添加失败','抱歉！您没有权限！','warning');
}else{
datagrid.datagrid("beginEdit",editRow);
$.messager.alert('警告操作','未知错误！请重新刷新后提交！','warning');
}
datagrid.datagrid("unselectAll");
}
});
//////////////////
},
onDblClickRow:function(rowIndex,rowData){
//双击开启编辑行
if(editRow==undefined){
datagrid.datagrid("beginEdit",rowIndex);
editRow=rowIndex;
}
}
});
});
以上所述是小编给大家介绍的EasyUI中的dataGrid的行内编辑，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！