Easyui datagrid 扩展单元格textarea editor

Posted 2021-02-02 shouke

datagrid 扩展单元格textarea editor

by:授客 QQ：1033553122

 

测试环境

jquery-easyui-1.5.3

 

问题描述

如下，在没有扩展的情况下，初始化如下

 

 

手动拖拽，拖拽时一边往右侧拖拽，结果如下，上图那个拖拽图标被隐藏了。停止拖拽后无法再次拖拽

 

 

解决方案

扩展textarea 编辑器

函数说明

函数        参数                  描述

init       container, options   初始化编辑器并且返回目标对象。

 

destroy    target                如果必要就销毁编辑器。

 

getValue   target                从编辑器中获取值

 

setValue   target , value       给编辑器设置值。

 

resize     target , width       如果必要就调整编辑器的尺寸。

 

代码实现

// 扩展textarea编辑器，以控制“拖拽”行为等

$.extend($.fn.datagrid.defaults.editors, {

textarea: {  // 调用名称     

        init : function(container, options) {  

           //container 用于装载编辑器 options,提供编辑器初始参数

           //这里把一个渲染成easyui-editable-input的textarea输入控件添加到容器container中，

           //需要时用传入options, 这样调用 input.textarea(options)

          var input = $(‘<textarea class="datagrid-editable-input" style="resize:vertical;height:200px"></textarea>‘).appendTo(container);  

            return input;  

        },  

        getValue : function(target) {  

            return $(target).val();  

        },  

        setValue : function(target, value) {  

            $(target).val(value);  

        },  

        resize : function(target, width) {  

            //列宽改变后调整编辑器宽度

            var input = $(target);  

            //Query.boxModel属性用于检测浏览器是否使用标准盒模型渲染当前页面。标准模式返回true，否则返回false。

            if ($.boxModel == true) {  

                input.width(width - (input.outerWidth() - input.width()) - 10);  

            } else {  

                input.width(width-10);  

            }  

        }  

}      

});  

 

 

在定义表格thead时引用编辑器

<th data-options="field:‘request_header‘, align: ‘left‘, editor:{type:‘textarea‘}, styler:setCellStyle" width="350px">请求头</th>

 

说明：width  - 10 是为了让拖拽后，还显示下图圈选的拖拽图标，如果不减去个适当的宽度，形如width - (input.outerWidth() - input.width())，那么拖拽后，将看不到拖拽标识。

 

 

 

style="resize:vertical;height:200px" 设置拖拽只能纵向拖拽(如果支持横向拖拽则依旧会出现拖拽标识被隐藏，停止拖拽后无法再次拖拽的情况)，默认编辑框高度 200px,如下高度

 

 

resize 可选值：

none 用户无法调整元素的尺寸。

both 用户可调整元素的高度和宽度。

horizontal 用户可调整元素的宽度。

vertical 用户可调整元素的高度

 

关于宽度的计算结果值，参考下图

 

 

 

参考链接：

http://www.w3school.com.cn/cssref/pr_resize.asp

https://www.cnblogs.com/yfrs/p/4980934.html

https://www.oschina.net/code/snippet_571282_34699