easyUI 的datagrid的自適應布局 一

2021-07-14 18:17:45 字數 1582 閱讀 7276

昨天除錯datagrid的頁面自適應,有些東西想要和大家分享一下。

先來說datagrid的兩種布局方式:

第一種:簡單的布局

課程: 

題型: 

查詢

新增修改刪除

題幹難度等級

分值

第二種布局

**實現:

查詢結果

新增刪除 復用

模板id(不可見用來獲取模板id)

模板名稱

期望分值

難度係數

總分操作人

說一下在解決這個問題中:

①如果使用自適應,所有的寬度,必須都是百分比。在設定自適應的**的時候,不僅僅是將**進行百分比設定,同時還需要將**的外面包括的div,進行設定。

②如果你發現了,你設定的寬度沒有起作用,可能在某個地方見樣式抽出來了,設定了固定的寬度。

三、自適應布局:

引用:1:比如在專案中用到了datagrid。如果介面比較簡單---只有乙個datagrid只需要把它的屬性fit 設定為true就能實現自動適應窗體。如果在datagrid上方還有其他div的話,datagrid就不能很好的自動適應窗體。如查datagrid有分頁控制項,分頁控制項就看不到了。這個時候就應該用 easyui-layout來分隔窗體來使具體的內容放在easyui-layout不同的部分。這樣就能很好的解決自適應問題。

**如下:

data-options="fit:true">		

2:基於body標籤的easyui-layout當瀏覽器視窗大小改變時,easyui-layout可以根據視窗的大小來調整自己的大小.基於div標籤的easyui-layout如果想擁有上述功能必須設定easyui-layout的屬性fit等於true.

情形1:

情形2:

3:在html中定義easyui時,下面兩種寫法是一樣的。即easyui控制項的屬性可以寫在dataoptions屬性裡,也可以把這些屬性寫到標籤上。

寫法1

data-options="fit:true">

data-options="region:'north'" style="height:100px">

data-options="region:'center'">

寫法2:

fit="true">

region="north"style="height:100px;">

region="center">

這只是自己做的時候的,一些小感受,寫篇部落格記錄下來。希望對大家有用。

實現easyui的datagrid匯出為excel

之前天智海網路有介紹過如何實現easyui裡datagrid內容的列印,今天給大家介紹下如何實現datagrid內容匯出為excel檔案。以下為 實現 export.js function changetotable printdatagrid if typeof frozencolumns ind...

關於easyui的datagrid翻頁儲存選中項

網上講的不多,我隨便寫一下。當我們想在datagrid翻頁時儲存選中項,比如從第一頁翻到第二頁在返回第一頁時想保留之前的選中項,datagrid已經給我們準備好了乙個屬性 idfield,這個屬性需指定乙個列名,且此列的值是不能有重複的。只需指定這個屬性,datagrid就具有翻頁儲存選中項的功能了...

EasyUI效果 DataGrid的編輯效果

var editindex undefined function endediting if dg datagrid validaterow editindex var productname ed.target combobox gettext dg datagrid getrows editin...