easyui行编辑：利用appendrow添加行 直接在行中编辑 ajax提交保存
效果如下：
点击添加按钮，在第二行的位置添加新行，点击单元格输入内容，点保存通过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动态编辑行就完成啦