Easyui datagrid 扩展单元格textarea editor
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
作者:授客
微信/QQ:1033553122
全国软件测试QQ交流群:7156436
Git地址:https://gitee.com/ishouke
友情提示:限于时间仓促,文中可能存在错误,欢迎指正、评论!
作者五行缺钱,如果觉得文章对您有帮助,请扫描下边的二维码打赏作者,金额随意,您的支持将是我继续创作的源动力,打赏后如有任何疑问,请联系我!!!
微信打赏
支付宝打赏 全国软件测试交流QQ群
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库