easyui行编辑：利用appendrow添加行 直接在行中编辑 ajax提交保存

效果如下：

点击添加按钮，在第二行的位置添加新行，点击单元格输入内容，点保存通过ajax提交。

修改则直接点击单元格修改，点保存提交。







代码如下：

首先table还是平常的table，只不过要在需要编辑的列加上editor:'text' 我这里只是编辑文本，所以是text，其他时间等类型请查api,

另外因为我触发修改的方式是直接点击单元格，所以table要加上onClickCell属性，然后重写onClickCell方法。

view
sourceprint?

01.

<code

class

=

"hljs
javascript"

>$(

'#remark_dg'

).datagrid({

02.

url:

''

,

03.

columns:[[

04.

{field:

'cb'

,checkbox:

true

,align:

'center'

},

05.

{field:

'id'

,title:

'编号'

,width:

80

,hidden:

true

},

06.

{field:

'text'

,title:

'内容'

,width:

80

,editor:

'text'

}

07.

]],

08.

toolbar:

'#remark_tb'

,

//表格菜单

09.

fit:

true

,

10.

fitColumns:

true

,

11.

loadMsg:

'加载中...'

,

//加载提示

12.

rownumbers:

true

,

//显示行号列

13.

singleSelect:

true

,

//是允许选择一行

14.

onClickCell:
onClickCell,

15.

queryParams:{

//在请求数据是发送的额外参数，如果没有则不用写

16.

},

17.

onLoadSuccess:function(data){

18.

},

19.

rowStyler:function(index,row){

20.

}

21.

});</code>

简单说明下可编辑的实现方法：

首先通过beginEdit让选中的行启动编辑，保存的时候，获得选中的行，通过row取到编辑的信息，使用ajax提交，提交完成，使用endEdit属性结束行编辑。

view
sourceprint?

01.

<code

class

=

"hljs
javascript"

><code

class

=

"hljs
javascript"

>

//可编辑行

02.

var
editIndex = undefined;

03.

function
endEditing(){

04.

if

(editIndex
== undefined){

return

true

}

05.

if

($(

'#remark_dg'

).datagrid(

'validateRow'

,
editIndex)){

06.

$(

'#remark_dg'

).datagrid(

'endEdit'

,
editIndex);

07.

editIndex
= undefined;

08.

return

true

;

09.

}

else

{

10.

return

false

;

11.

}

12.

}

13.

function
onClickCell(index,field){

14.

if

(editIndex
!= index){

15.

if

(endEditing()){

16.

$(

'#remark_dg'

).datagrid(

'selectRow'

,
index)

17.

.datagrid(

'beginEdit'

,
index);

18.

var
ed = $(

'#remark_dg'

).datagrid(

'getEditor'

,
{index:index,field:field});

19.

($(ed.target).data(

'textbox'

)
? $(ed.target).textbox(

'textbox'

)
: $(ed.target)).focus();

20.

editIndex
= index;

21.

}

else

{

22.

$(

'#remark_dg'

).datagrid(

'selectRow'

,
editIndex);

23.

}

24.

}

25.

}

26.

function
accept(){

27.

if

(endEditing()){

28.

var
row = $(

'#remark_dg'

).datagrid(

'getSelected'

);

29.

var
text = row.text;

30.

var
remarkid = row.id;

31.

var
typeid = $(

'#typeid'

).val();

32.

$.ajax({

33.

url:

'${ctx}/typeRemark/addTypeRemark.do'

,

34.

type:

'post'

,

35.

dataType:

'json'

,

36.

data:{

37.

remarkid:remarkid,

38.

text:text,

39.

typeid:typeid

40.

},

41.

success:function(data){

42.

if

(data.status
==

'success'

){

43.

$.messager.show({

44.

title
:

'提示'

,

45.

msg
:

'操作成功'

46.

});

47.

$(

'#dg'

).datagrid(

'load'

,
{});

48.

}

else

{

49.

$.messager.show({

50.

title
:

'提示'

,

51.

msg
:

'操作失败，请联系管理员
------'

52.

});

53.

}

54.

},

55.

error:function(){

56.

$.messager.show({

57.

title
:

'提示'

,

58.

msg
:

'系统错误，请联系管理员------'

59.

});

60.

}

61.

});

62.

}

63.

}

64.

function
addRemark(){

65.

function
addRemark(){

66.

if

(editIndex
!= undefined){

67.

return

;

68.

}

69.

$(

'#remark_dg'

).datagrid(

'insertRow'

,{

70.

index:

1

,

//
索引从0开始

71.

row:
{

72.

text:

''

73.

}

74.

});

75.

$(

'#remark_dg'

).datagrid(

'selectRow'

,

1

);

76.

$(

'#remark_dg'

).datagrid(

'beginEdit'

,

1

);

77.

var
ed = $(

'#remark_dg'

).datagrid(

'getEditor'

,
{index:

1

,field:

'text'

});

78.

$(ed.target).focus();

79.

editIndex
=

1

;

80.

}

81.

}</code></code>

这里有必要提一下，我的添加和修改方法用了一个方法accpet(),同时后台也用一个方法处理的，有需要的可以借鉴一下：

表现层用的是spring mvc，持久成用的hibernate:

view
sourceprint?

01.

<code

class

=

"hljs
javascript"

><code

class

=

"hljs
javascript"

><code

class

=

"hljs
lasso"

>

@RequestMapping

(value
=

'/addTypeRemark.do'

,method
= RequestMethod.POST)

02.

@ResponseBody

03.

public

Map<String,String>
addTypeRemark(String text,String typeid,

@RequestParam

(value
=

'remarkid'

,
required =

false

)Integer
remarkid,HttpServletRequest request){

04.

Map<String,String>
map =

new

HashMap<String,String>
();

05.

System.out.println(typeid);

06.

try

{

07.

BatchType
batchType=batchTypeMag.find(Integer.parseInt(typeid));

08.

TypeRemark
typeRemark =

new

TypeRemark();

09.

if

(remarkid!=

null

){

10.

typeRemark
= typeRemarkMag.find(remarkid);

11.

}

12.

typeRemark.setBatchType(batchType);

13.

typeRemark.setText(text);

14.

typeRemarkMag.saveOrUpdate(typeRemark);

15.

map.put(

'status'

,

'success'

);

16.

}

catch

(Exception
e) {

17.

e.printStackTrace();

18.

map.put(

'status'

,

'fail'

);

19.

}

20.

return

map;

21.

}</code></code></code>

也就是说，添加的时候，没有这条记录的id,修改的时候需要通过记录的id修改，所以可以判断一下。

这样，easyui动态编辑行就完成啦