easuyui datagrid行内編集を実現しました。
［size=large］easuyuiのdatagrid行の編集は、修正情報に対して直感的で便利であり、以下の例を挙げて説明する。
[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=medium]説明：
1.需要に応じて、status列を除いて、他の列は編集されることを要求しないので、readonly:'true'を設定し、disabled:trueを編集することを禁止します。
2.objオブジェクトにeditRowを設定する意味は、ユーザーが1行のみを修正することができること、すなわち、this.editoRow=undefinedを前提に修正することを制限することにある。
3.$(''菗dg').datagrid('begine Edit'，index);は修正操作の開始です。変更を終了します。注意したいのは、提出した情報が検証（存在すれば）によってのみ修正が終了することです。修正が完了したらdatagridのonAfterEditメソッドに入り、コントローラに提出します。[/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=medium]説明：
1.需要に応じて、status列を除いて、他の列は編集されることを要求しないので、readonly:'true'を設定し、disabled:trueを編集することを禁止します。
2.objオブジェクトにeditRowを設定する意味は、ユーザーが1行のみを修正することができること、すなわち、this.editoRow=undefinedを前提に修正することを制限することにある。
3.$(''菗dg').datagrid('begine Edit'，index);は修正操作の開始です。変更を終了します。注意したいのは、提出した情報が検証（存在すれば）によってのみ修正が終了することです。修正が完了したら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 " を "
+" "
}
}
...
]],
})
//
public void getJobStatusList() throws IOException{
resp.setCharacterEncoding("UTF-8");
jobStatus=jobStatusService.listJobStatus();
List[img]http://dl2.iteye.com/upload/attachment/0112/1029/83a109b8-5641-3a91-962f-af2265360f4d.png[img]