JQuery easyUi datagrid 中 editor 增加自定义事件(1)

easyUi 的datagrid可编辑表格中需要为一列增加字数输入限制，由于没有找到该插件的 editor 中有自定义函数的api，所以，只能自己在onClickRow中实现了，实现方法也挺简单的，在onClickRow中添加自定义函数即可。

[html]  view plain copy

1. //增加完成情况字数输入限制  
2.                 $('#workloadTable').datagrid('beginEdit', rowIndex);  
3.                 var ed = $('#workloadTable').datagrid('getEditors', rowIndex);  
4.                 for (var i = 0; i < ed.length; i++)  
5.                 {  
6.                     var e = ed[i];  
7.                     $(e.target).bind("keyup",function()  
8.                             {  
9.                          return countChar($(this));  
10.                     }).bind("change", function()  
11.                     {  
12.                          return countChar($(this));  
13.                     });  
14.                 }  

其中 workloadTable 是table的id，countChar 是字符验证函数,代码如下：

[html]  view plain copy

1. /**  
2.       *  输入框字数提示和fix  
3.       * @param textarea  
4.        */  
5.       function countChar(textarea)  
6.       {  
7.           var currentWords = $(textarea).val().length;  
8.   
9.           if (currentWords > maxWords)  
10.           {  
11.               alert('最多只能输入'+maxWords+'个字符!');  
12.               $(textarea).val($(textarea).val().substr(0, maxWords));  
13.               return false;  
14.           }  
15.       }  

但是，这是为所有的Editors 都添加了字符验证方法，如果需要指定到某列，可以尝试以下方法：

通过调试我们可以看到：我们遍历的editor 列表 var e = ed[i] 中，每个editor 有如下属性：

因此，我们想要只绑定某一列，则做个判断即可：

例如：加上  if(e.field == "description")  ，表明只给 description 列 bind 字符限制方法，部分代码：

[html]  view plain copy

1. onClickRow:function(rowIndex, rowData){  
2.                 if (lastIndex != rowIndex){  
3.                     $('#workloadTable').datagrid('endEdit', lastIndex);  
4.                     $('#workloadTable').datagrid('beginEdit', rowIndex);  
5.                 }  
6.   
7.                 //增加完成情况字数输入限制  
8.                 $('#workloadTable').datagrid('beginEdit', rowIndex);  
9.                 var ed = $('#workloadTable').datagrid('getEditors', rowIndex);  
10.                 for (var i = 0; i < ed.length; i++)  
11.                 {  
12.                     var e = ed[i];  
13.                     alert(e.field);  
14.                     if(e.field == "description")  
15.                     {  
16.                         $(e.target).bind("keyup",function()  
17.                             {  
18.                             return countChar($(this));  
19.                         }).bind("change", function()  
20.                         {  
21.                             return countChar($(this));  
22.                         });  
23.                     }  
24.                 }  
25.   
26.                 setEditing(rowIndex, rowData);  
27.                 lastIndex = rowIndex;  
28.             }  

最后，editor 自定义事件已经绑定完成。

方法2：http://blog.csdn.net/tianlincao/article/details/7531617