datagrid中插入可自动换行的文本编辑框

在编辑状态下，默认的textbox无法自动换行，扩展后的textarea可以自动输入换行，如下图所示：
编辑完成点击确认后，可以利用formatter方法将显示的内容自动换行，如下图所示：

源码
1、html部分

<button style="width: 10%;height: 30px;margin: 1%"onclick="test()" >点击增加一行</button>
<table id="datagrid" class="easyui-datagrid" title="EASYUI-datagrid测试" cellspacing="5" style="width:50%;height:400px;background-color: #fff"
       data-options="singleSelect:true,
                   collapsible:true,
                   multiline:true,
                   fitColumns:true,
                   nowrap:false,
                   onClickCell:onClickCellcoll,
                   onEndEdit: onEndEditcoll"
>
    <thead>
    <tr>
        <th data-options="field:'id',align:'center',halign:'center',styler:styler_form"width="10%" >序号</th>
        <th data-options="field:'textbox',align:'left',halign:'center',editor:'textbox',styler:styler_form,formatter:formatter_form" width="30%">默认的textbox</th>
        <th data-options="field:'textarea',align:'left',halign:'center',editor:'textarea',styler:styler_form,formatter:formatter_form"  width="30%">扩展的textarea</th>
        <th data-options="field:'save',align:'center',halign:'center',styler:styler_form,formatter:formatOK"width="30%">完成编辑</th>
    </tr>
    </thead>
</table>

2、javascript部分

<script>
   function test() {
       var rows = $('#datagrid').datagrid('getRows').length;
       $('#datagrid').datagrid('insertRow', {
           index: rows,	// index start with 0
           row: {
               id:rows+1,
           }
       })
           .datagrid('selectRow', rows)
           .datagrid('beginEdit', rows)
   }
   function formatter_form(val,row,index){
       return '<div style="width=250px;word-break:break-all;word-wrap:break-word;white-space:pre-wrap;">'+val+'</div>';
   }
   function formatOK(val,row,index){
       return '<a href="#" rel="external nofollow" οnclick="editUser('+index+')">点击确认</a>';
   }
   function editUser(index){
       endEditingcoll();
   }

   var editIndex = undefined;
   function endEditingcoll(){//该方法用于关闭上一个焦点的editing状态
       if (editIndex == undefined){return true}
       if ($('#datagrid').datagrid('validateRow', editIndex)){
           $('#datagrid').datagrid('endEdit', editIndex);
           editIndex = undefined;
           return true;
       } else {
           return false;
       }
   }

   function onEndEditcoll(index, row){
       var ed = $(this).datagrid('getEditor', {
           index: index,
           field: 'textbox'
       });
       row.textbox = $(ed.target).textbox('getText');
       var ed = $(this).datagrid('getEditor', {
           index: index,
           field: 'textarea'
       });
       row.textarea = $(ed.target).val();
   }

   function onClickCellcoll(index, field){
       if (editIndex != index){
           if (endEditingcoll()){
               $('#datagrid').datagrid('selectRow', index)
                   .datagrid('beginEdit', index);
               var ed = $('#datagrid').datagrid('getEditor', {index:index,field:field});
               if (ed){
                   ($(ed.target).data('textarea') ? $(ed.target).textarea('textarea') : $(ed.target)).focus();
                   ($(ed.target).data('text') ? $(ed.target).textbox('text') : $(ed.target)).focus();
               }
               editIndex = index;
           } else {
               setTimeout(function(){
                   $('#datagrid').datagrid('selectRow', editIndex);
               },0);
           }
       }
   }
</script>

3、easyui的扩展部分

$.extend($.fn.datagrid.defaults.editors, {
       textarea: {//textarea就是你要自定义editor的名称
           init: function(container, options){
             return $('<textarea  data-options="multiline:true" wrap="hard" style="height:100px;width:100%;word-break:break-all;word-wrap:break-word;white-space: pre-wrap;border: 1px solid #D4D4D4;background-color: #CCE8CF;"></textarea>').appendTo(container);
           },
           getValue: function(target){
               return $(target).val();
           },
           setValue: function(target, value){
               $(target).val(value);
           },
           resize: function(target, width){
               console.log("resize method invoke!");
           },
           destroy: function(target){
               console.log("destroy method invoke!");
           }
       }
   });

OK，作为一枚小白，纠结了两天终于。。终于解决了这个问题，各位大佬如果有更简单的实现方法，欢迎分享，飘了~