效果如下：
点击添加按钮，在第二行的位置添加新行，点击单元格输入内容，点保存通过ajax提交。
修改则直接点击单元格修改，点保存提交。
代码如下：
首先table还是平常的table，只不过要在需要编辑的列加上editor:'text' 我这里只是编辑文本，所以是text，其他时间等类型请查api,
另外因为我触发修改的方式是直接点击单元格，所以table要加上onClickCell属性，然后重写onClickCell方法。
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属性结束行编辑。
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:
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动态编辑行就完成啦
1455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
