Easyui datagrid 擴展單元格textarea editor

来源:https://www.cnblogs.com/shouke/archive/2019/01/11/10257543.html
-Advertisement-
Play Games

datagrid 擴展單元格textarea editor by:授客 QQ:1033553122 測試環境 jquery-easyui-1.5.3 問題描述 如下,在沒有擴展的情況下,初始化如下 手動拖拽,拖拽時一邊往右側拖拽,結果如下,上圖那個拖拽圖標被隱藏了。停止拖拽後無法再次拖拽 解決方案 ...


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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 目的:handle的出現主要是為瞭解決線程間通訊。 舉個例子,android是不允許在主線程中訪問網路,因為這樣會阻塞主線程,影響性能,所以訪問網路都是放在子線程中執行,對於網路返回的結果則需要顯示在主線程中,handler就是連接主線程和子線程的橋梁。 1.handler基本使用方法 看一下使用方 ...
  • 今天做項目的時候遇到一個需求,就是子view視圖彈出時,屏蔽掉父view的所有手勢,然後想到用 UIGestureRecognizerDelegate代理方法,中間省一些文字(無奈臉),言歸正傳,NSStringFromClass其實是用來判斷類型的,看代碼 好尷尬的我。。。。屏蔽掉父view的所有 ...
  • MIUI12系統能有啥方法開啟root超級許可權?各位都清楚,Android機器有root超級許可權,如果手機開啟root相關許可權,可以實現更好的功能,舉例子,各位公司的營銷部門,使用某些營銷軟體都需要在root超級許可權下執行,如果手機無能獲的root的許可權,則沒辦法正常使用相關的功能。 MIUI12系 ...
  • 背景: 由於,項目需要,需要進行視頻通信,把a的畫面,轉給b。 運維部署: APP1:編碼攝像頭採集的數據,並且發送數據到服務端 APP2:從服務端,拉取數據,並且進行解碼顯示 服務端:接收APP1提交的數據,發送APP1提交數據到APP2 應用說明: APP1:camera = Camera.op ...
  • 1.CommonJS 中的 require/exports 和 ES6 中的 import/export 區別? 2.項目做過哪些性能優化? 3.js 非同步載入的方式? 4.get與post 通訊的區別? 5.為什麼虛擬 dom 會提高性能? ...
  • 1 function formatDateTime(date) { 2 var y = date.getFullYear(); 3 var m = date.getMonth() + 1; 4 m = m < 10 ? ('0' + m) : m; 5 var d = date.getDate();... ...
  • 固定導航欄 前言:很多網站都有這種網頁的效果:滑動瀏覽器右側的滾動條,導航欄會一直處於最上方 下麵我就來簡單實現以下這個功能 一.首先我們來寫一下html的結構: 二.我們來簡單寫一下樣式 這個結構可以說是簡單明瞭,由三部分組成 頂部 導航欄 還有主體部分 但是我們並不打算繼續寫下去 我們簡單的用樣 ...
  • ♥緩動動畫函數 · 之前我在博客上寫過勻速的動畫函數 :https://www.cnblogs.com/Lzxgg-xl/p/10227127.html · 與勻速的相比 有相同的地方 也有不同的地方 我在這裡就簡單的寫一遍 一. 首先還是一樣,因為它是個函數體我們要傳參 即 : 1.移動的元素 2 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...