easyui实现datagrid行内编辑
[size=large]easyui的datagrid行内编辑对于修改信息而言比较方便直观，下面举例说明：[/size]
[size=large]需求说明：[/size]
[size=medium]在行内编辑员工状态[/size]
[img]http://dl2.iteye.com/upload/attachment/0112/1027/06c09eb5-f62f-38f2-b1f9-f97d8c69bef3.png[/img]
[size=large]一、编辑jsp[/size]
[size=large]二、编辑js[/size]
[size=medium]说明：
1.根据需求，除了status列，其它列均不要求被编辑，故设置readonly:'true',disabled:true，禁止其被编辑。
2.对obj对象设置editRow的意义在于限制用户只能对一行进行修改操作，即在this.editRow == undefined前提下进行修改。
3.$('#dg').datagrid('beginEdit',index);是修改操作的开始，$('#dg').datagrid('endEdit',this.editRow);结束修改。需注意的是，只有提交的信息通过验证（如果存在的话）才能结束修改。结束修改后会进入datagrid的onAfterEdit方法，以提交至控制器。[/size]
[size=large]三、编辑控制器[/size]
[size=small]大功告成，效果如下：[/size]
[img]http://dl2.iteye.com/upload/attachment/0112/1029/83a109b8-5641-3a91-962f-af2265360f4d.png[/img]
[size=large]需求说明：[/size]
[size=medium]在行内编辑员工状态[/size]
[img]http://dl2.iteye.com/upload/attachment/0112/1027/06c09eb5-f62f-38f2-b1f9-f97d8c69bef3.png[/img]
[size=large]一、编辑jsp[/size]
...
保存
取消编辑
...
[size=large]二、编辑js[/size]
[size=medium]说明：
1.根据需求，除了status列，其它列均不要求被编辑，故设置readonly:'true',disabled:true，禁止其被编辑。
2.对obj对象设置editRow的意义在于限制用户只能对一行进行修改操作，即在this.editRow == undefined前提下进行修改。
3.$('#dg').datagrid('beginEdit',index);是修改操作的开始，$('#dg').datagrid('endEdit',this.editRow);结束修改。需注意的是，只有提交的信息通过验证（如果存在的话）才能结束修改。结束修改后会进入datagrid的onAfterEdit方法，以提交至控制器。[/size]
obj = {
//编辑行属性
editRow:undefined,
//保存
save:function(){
//结束当前编辑行.注：1.只有填写的信息通过验证后才能结束编辑.2.结束编辑后进入datagrid的onAfterEdit方法。
$('#dg').datagrid('endEdit',this.editRow);
},
//取消
redo:function(){
this.editRow = undefined
$('#dg').datagrid('rejectChanges')//回滚已编辑数据
},
//datagrid行内修改用户状态。index：当前行索引值。
editStatus:function(index){
//获取选择行
var rows = $('#dg').datagrid('getSelections');
if(currUserStatus!=0){
$.messager.alert('警告', '您不是管理员，无权执行此操作！', 'warning');
}else{
//修改操作需选中一行
if(rows.length == 1 ){
//如果已有编辑行，则关闭当前编辑行
if(this.editRow != undefined) $('#dg').datagrid('endEdit',this.editRow);
//如果未有编辑行，则进行编辑
if(this.editRow == undefined){
//设置当前行为编辑状态
$('#dg').datagrid('beginEdit',index);
//将当前行索引值赋给obj的editRow
this.editRow = index;
//取消选择当前行
$('#dg').datagrid('unselectRow',index);
}
}else{
$.messager.alert('警告', '修改必须选中仅且一行！', 'warning');
}
}
},
...
}
...
$('#dg').datagrid({
//条纹
striped:true,
//标题
title:'用户管理',
//提交的url地址
url:'emplAction!listEmpl.action',
//允许收缩数据
collapsible:'true',
//分页
pagination:'true',
//自适应
fit:'true',
//默认页容量
pageSize:'10',
//分页工具位置
pagePosition:'top',
//列自适应
fitColumns:'true',
//显示编号
rownumbers:'true',
//排序
sortable:'true',
sortName:'id',
//主键
idField:'id',
...
//在datagrid中进行添加或修改操作。注：当前业务没有在datagrid中“添加操作”的需求，只有更新操作，故省去了“添加操作”的判定。
onAfterEdit:function(rowIndex,rowData,changes){
var updated = $('#dg').datagrid('getChanges','updated');
var url = '';
//如果选择了修改，但实际未做任何改变，则直接返回false
if(updated.length==0){
obj.editRow = undefined;
return false
}
//修改用户
if(updated.length>0){
url='emplAction!editStatus.action';
}
//ajax提交，rowData是行数据
$.ajax({
timeout:1000,//超时时间设置，单位：毫秒
type:'post',
url:url,
data:{
row:rowData,
},
/* beforeSend:function(){
console.log("提交前..")
console.log(rowData);
console.log(url);
$('#dg').datagrid('loading');
},*/
success:function(data){
if(data){
$('#dg').datagrid('loaded');
$('#dg').datagrid('load');
$('#dg').datagrid('unselectAll');
//当前行结束编辑
$('#dg').datagrid('endEdit',obj.editRow);
$.messager.show({
title:'提示',
msg:data,
})
obj.editRow = undefined;
}
},
complete:function(XMLHttpRequest,status){
if(status=='timeout'){
alert('修改失败，超时..')
}
},
error:function(XMLHttpRequest,errorThrown){
if(errorThrown=='408'){
alert('修改失败，超时..')
}
}
})
},
//列字段
columns:[[
{
field:'ck',
checkbox:true
},
{
field:'eid',
title:'用户编号',
height:30,
width:100,
align:'center',
sortable:'true',//排序
readonly:'true',
disabled:true//禁止编辑
/*editor:{
type:'numberbox',
options:{
required:true,
disabled:true//禁止编辑
}
}*/
},
{
field:'ename',
title:'用户名',
width:100,
height:30,
align:'center',
readonly:'true',
disabled:true
},
{
field:'hiredate',
title:'入职时间',
width:100,
height:30,
align:'center',
readonly:'true',
disabled:true
},
{
field:'jname',
title:'职位描述',
width:100,
height:30,
align:'center',
readonly:'true',
disabled:true
},
{
field:'dname',
width:100,
height:30,
title:'所属部门',
align:'center',
readonly:'true',
disabled:true
},
{
field:'status',
width:100,
height:30,
title:'状态',
align:'center',
editor:{//编辑选项
type:'combobox',
options:{
url:"emplAction!getJobStatusList.action",//请求地址
required:true,
panelHeight: 'auto',
valueField:'jsid',//下拉框的值
textField:'status'//下拉框显示的文本
}
}
},
{
field:'process',
title:'操作',
width:150,
height:30,
align:'center',
//格式化列值（设置列值在页面的显示样式）
formatter:function(value,row,index){
return "修改状态"
+" 删除"
}
}
...
]],
})
[size=large]三、编辑控制器[/size]
//获取职位信息
public void getJobStatusList() throws IOException{
resp.setCharacterEncoding("UTF-8");
jobStatus=jobStatusService.listJobStatus();
List> list = new ArrayList<>();
Map map = null;
if(jobStatus.size()!=0){
for (int i = 0; i < jobStatus.size(); i++) {
map = new HashMap();
map.put("jsid", String.valueOf(jobStatus.get(i).getJsid()));
map.put("status", jobStatus.get(i).getStatus());
list.add(map);
}
}
String s = JSON.toJSONString(list);
PrintWriter out = resp.getWriter();
out.println(s);
}
//修改用户状态
public void editStatus()
throws IOException {
resp.setCharacterEncoding("UTF-8");
//获取提交的datagrid中的行数据
int eid = Integer.parseInt(req.getParameter("row[eid]"));
int status = Integer.parseInt(req.getParameter("row[status]"));
boolean b = false;
b = empService.editStatus(status, eid);
PrintWriter out = resp.getWriter();
if(b){
out.print("修改成功！");
}else{
out.print("修改失败！");
}
}
[size=small]大功告成，效果如下：[/size]
[img]http://dl2.iteye.com/upload/attachment/0112/1029/83a109b8-5641-3a91-962f-af2265360f4d.png[/img]