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

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

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

编辑器（Editor）

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

每个编辑器有下列行为：

名称	参数	描述
init	container, options	初始化编辑器并且返回目标对象。
destroy	target	如果必要就销毁编辑器。
getValue	target	从编辑器的文本获取值。
setValue	target , value	给编辑器设置值。
resize	target , 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 高度就可以。

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