easyui datagrid 可编辑类型单元格-适当调整高度

前言：适当调整可编辑单元格的高度，这里只阐述编辑单元格类型为textbox的案例。

1，先看下easyui 官方提供的资料。

编辑器（Editor）

通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。

每个编辑器有下列行为：

名称参数描述initcontainer, options初始化编辑器并且返回目标对象。destroytarget如果必要就销毁编辑器。getValuetarget从编辑器的文本获取值。setValuetarget , value给编辑器设置值。resizetarget , width如果必要就调整编辑器的尺寸。

这是官方提供可重写的方法名称。

2，再看下重写的方法内容。

$.extend($.fn.datagrid.defaults.editors, {    text: {init: function(container, options){var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);return input;},destroy: function(target){$(target).remove();},getValue: function(target){return $(target).val();},setValue: function(target, value){$(target).val(value);},resize: function(target, width){$(target)._outerWidth(width);}    }});

可以看出，再init方法可以调整输入框的样式，关键就在这里，我们可以修改输入框样式。

3，看下，需求页面定义。

<th data-options="halign:'center',field:'pro_seat_no', width:200,align:'left',editor:{type:'textbox',options:{init:initCell}}">      名称    </th>

注意：data-options属性中定义了editor属性，并且在options字段中重新定义当前单元格的输入框对象，

4，再看下，initCell函数。

function initCell(container, options){        var input = $('<input type="text" class="datagrid-editable-input" style="height: 30px;">').appendTo(container);        return input;    }

在这个函数定义一个input元素，设置当前input 高度就可以。

实现效果就不提供了，仅供参考。