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

效果如下：
点击添加按钮，在第二行的位置添加新行，点击单元格输入内容，点保存通过ajax提交。
修改则直接点击单元格修改，点保存提交。
这里写图片描述

代码如下：
首先table还是平常的table，只不过要在需要编辑的列加上editor:'text' 我这里只是编辑文本，所以是text，其他时间等类型请查api,
另外因为我触发修改的方式是直接点击单元格，所以table要加上onClickCell属性，然后重写onClickCell方法。

<code class="hljs javascript">$('#remark_dg').datagrid({
url:'',
columns:[[
{field:'cb',checkbox:true,align:'center'},
{field:'id',title:'编号',width:80,hidden:true},
{field:'text',title:'内容',width:80,editor:'text'}
]],
toolbar:'#remark_tb',  //表格菜单
fit:true,
fitColumns:true,
loadMsg:'加载中...', //加载提示
rownumbers:true, //显示行号列
singleSelect:true,//是允许选择一行
onClickCell: onClickCell,
queryParams:{   //在请求数据是发送的额外参数，如果没有则不用写
},
onLoadSuccess:function(data){
},
rowStyler:function(index,row){
}
});</code>

简单说明下可编辑的实现方法：首先通过beginEdit让选中的行启动编辑，保存的时候，获得选中的行，通过row取到编辑的信息，使用ajax提交，提交完成，使用endEdit属性结束行编辑。

<code class="hljs javascript"><code class="hljs javascript"> //可编辑行
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true}
if ($('#remark_dg').datagrid('validateRow', editIndex)){
$('#remark_dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field){
if (editIndex != index){
if (endEditing()){
$('#remark_dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#remark_dg').datagrid('getEditor', {index:index,field:field});
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
editIndex = index;
} else {
$('#remark_dg').datagrid('selectRow', editIndex);
}
}
}
function accept(){
if (endEditing()){
var row = $('#remark_dg').datagrid('getSelected');
var text = row.text;
var remarkid = row.id;
var typeid = $('#typeid').val();
$.ajax({
url:'${ctx}/typeRemark/addTypeRemark.do',
type:'post',
dataType:'json',
data:{
remarkid:remarkid,
text:text,
typeid:typeid
},
success:function(data){
if(data.status == 'success'){
$.messager.show({
title : '提示',
msg : '操作成功'
});
$('#dg').datagrid('load', {});
}else{
$.messager.show({
title : '提示',
msg : '操作失败，请联系管理员 ------'
});
}
},
error:function(){
$.messager.show({
title : '提示',
msg : '系统错误，请联系管理员------'
});
}
});
}
}
function addRemark(){
function addRemark(){
if (editIndex != undefined){
return ;
}
$('#remark_dg').datagrid('insertRow',{
index: 1,   // 索引从0开始
row: {
text:''
}
});
$('#remark_dg').datagrid('selectRow', 1);
$('#remark_dg').datagrid('beginEdit', 1);
var ed = $('#remark_dg').datagrid('getEditor', {index:1,field:'text'});
$(ed.target).focus();
editIndex = 1;
}
}</code></code>

这里有必要提一下，我的添加和修改方法用了一个方法accpet(),同时后台也用一个方法处理的，有需要的可以借鉴一下：表现层用的是spring mvc，持久成用的hibernate:

<code class="hljs javascript"><code class="hljs javascript"><code class="hljs lasso">@RequestMapping(value = '/addTypeRemark.do',method = RequestMethod.POST)
@ResponseBody
public Map<String,String> addTypeRemark(String text,String typeid,@RequestParam(value ='remarkid', required = false)Integer remarkid,HttpServletRequest request){
Map<String,String>  map = new HashMap<String,String> ();
System.out.println(typeid);
try {
BatchType batchType=batchTypeMag.find(Integer.parseInt(typeid));
TypeRemark typeRemark = new TypeRemark();
if(remarkid!=null){
typeRemark = typeRemarkMag.find(remarkid);
}
typeRemark.setBatchType(batchType);
typeRemark.setText(text);
typeRemarkMag.saveOrUpdate(typeRemark);
map.put('status','success');
} catch (Exception e) {
e.printStackTrace();
map.put('status','fail');
}
return map;
}</code></code></code>

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

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