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 高度就可以。


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

















版权声明:本文为weixin_37852133原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。