Web界面開發工具!Kendo UI for jQuery數據管理之鎖定列

點擊“瞭解更多”獲取Kendo UI for jQuery R1 2020 SP1試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。

鎖定(凍結)列使您可以在用戶水平滾動網格時始終顯示特定列。

有關可運行的示例,可參閱有關在Grid中實現鎖定列的演示。

<code>


<title>
<link>
<link>
<link>















/<code>


為了使該功能正常運行,必須提供以下配置設置。 它們確保至少一個非鎖定列始終可見,並且可以水平滾動非鎖定列。 如果預期的水平空間不足,則不會出現水平滾動條。

  • 啟用滾動。
  • 首先鎖定至少一列。
  • 定義網格的高度。
  • 為所有列設置顯式像素寬度,允許網格調整已凍結和未凍結表部件的佈局。
  • 確保所有鎖定列的總寬度等於或小於網格的寬度減去滾動條寬度的三倍。
  • 確保未在隱藏容器內初始化網格。

注意:

  • Grid的JavaScript API允許您動態鎖定和解鎖列。 但是,只有在初始化期間至少鎖定一列時,才有可能這樣做。 應用凍結的列時,網格的HTML輸出和腳本操作是不同的,這就是初始化後小部件無法在凍結和未凍結模式之間切換的原因。
  • 鎖定的列只能位於網格的左側,不支持將它們放置在右側。
  • 行模板和詳細信息功能不與鎖定列結合使用,如果使用多列標題,則只能將列鎖定在最頂層。

鎖定的列無法觸摸滾動,因為它們被封裝在一個具有溢出:隱藏樣式的容器中。 要解決臺式機設備上的此限制,請使用mousewheel事件。 但是,觸摸設備不存在任何解決方法。

鎖定列依賴於同步網格的凍結和非凍結部分的行高,某些瀏覽器(例如Internet Explorer 9和Firefox)要求以像素為單位設置行高樣式。 否則,由於子像素問題,同步可能無法正常工作。


<code>div.k-grid td
{
line-height: 18px;
}/<code>


當您實現自定義代碼並依靠選擇器或以Grid表為目標時,Grid為其鎖定和可滾動部分創建單獨的表。 鎖定列位於.k-grid-content-locked元素內,而可滾動內容位於.k-grid-content元素內。



分享到:


相關文章: