Easyui datagrid 扩展单元格textarea editor
2019-01-15 07:02:08来源:博客园 阅读 ()
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 转动时钟实例
- jQuery EasyUI tree增加搜索功能的实现方法 2019-12-17
- 关于ES6的对象扩展运算符 2019-08-14
- [笔记]记录原开发工作在base命名空间下扩展的属性与方法 2019-04-28
- es6 字符串的扩展和数值的扩展 2019-04-20
- ES6 学习6 数组的扩展 2019-02-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash