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