Easyui datagrid 扩展单元格textarea editor

2019-01-15 07:02:08来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 


原文链接:https://www.cnblogs.com/shouke/p/10257543.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:06JavaScript变量

下一篇:js canvas 转动时钟实例