(35)uniGUI for Delphi UniDBGrid的一些功能優化

martian6125發表於2020-11-30

(中行雷威2019.12.5)

(同一個世界,同一個夢想,交流學習C++Builder and Delphi XE10,傳承c++builder and Delphi的魅力!歡迎各地朋友加入我的QQ群484979943、299497712,860634510,進群密碼“BCB”,同時也請將該群號廣為宣傳,希望能夠廣集各方高手,共同進步。如需下載開發工具及原始碼請加入我的QQ群。)

【閱讀倡議】

1、有問題請留言;

2、沒問題請點贊;

3、看連載請加群;

4、下原始碼請加群;

【開發工具】

1、C++Builder and Delphi 10.3.3

2、FMSoft_uniGUI_Complete_Professional_1.70.0.1514(正版)

本人主筆的國內第一本uniGUI教學案例程式碼已誕生,分為cbuilder和delphi兩個版本,買程式碼送手冊,需要的朋友可以加入我的QQ技術交流群484979943、299497712,860634510給我(群主)留言。資料簡介:

https://www.meipian.cn/20b86ayo?share_from=others&user_id=64168117&uuid=a8a75af8c0cc31e6a21b8a79a2b07398&share_depth=1&first_share_uid=64168117&utm_medium=meipian_android&share_user_mpuuid=94b70e99e8b6986c71b270a9883befb2
 

9.7 UniDBGrid控制元件的幾個功能優化

9.7.1 內容自動換行

預設UniDBGrid的cell內的內容如果超出表格列寬並不自動換行和調整行高,給客戶帶來極大的不方便,通過修改ServerModule的屬性CustomCSS可以實現。

<style type="text/css">

.x-grid-cell-inner {

  white-space: initial;

}</style>

9.7.2 滑鼠停留顯示欄位

如果某個表格欄位內容太長,你想實現當滑鼠移動到欄位上方時以提示視窗形式顯示欄位內容,你可以在查詢語句執行後設定表格對應欄位的ShowToolTip屬性實現。

UniDBGrid1.Columns.Items[0].ShowToolTip:=true;

9.7.3 表格底部顯示當前記錄數和總記錄數

         在UniDBGrid的ClientEvents->UniEvents屬性中,選擇Ext.toolbar.Paging,新增pagingBar.beforeInit事件,再執行表格後你會發現表格底部右側將顯示“顯示1-10條,共120條”。

function pagingBar.beforeInit(sender, config)

{

config.displayInfo = true;

}

9.7.4 自動設定列寬

開啟UniDBGrid的ClientEvents->ExtEvents屬性,選擇Ext.data.Store頁,雙擊其store.load事件,新增如下程式碼即可實現每個列根據其最長欄位的長度自動調整表格列寬:

function store.load(sender, records, successful, operation, eOpts)

{

  sender.grid.columnManager.columns.forEach(function(col){col.autoSize()})

}

9.7.5 鎖定某行某列

         如果UniDBGrid的ReadOnly屬性為False,則允許雙擊一個CELL來編輯其內容,如果想要讓特定的行和列不允許被編輯,請開啟UniDBGrid的ClientEvents->ExtEvents屬性,選擇Ext.grid.Panel頁,雙擊其beforeedit事件,新增如下程式碼:

function beforeedit(editor, context, eOpts)

{

  var FixedRow, FixedCol;

  FixedRow = 3;

  FixedCol = 3;  

  if (editor.cmp.uniRow < FixedRow || editor.cmp.uniCol < FixedCol)

{

     return false;

       }

}

         以上程式碼將實現鎖定前三行和前三列不能雙擊表格進入編輯狀態,其它區域不受影響。但是,測試發現,如果UniDBGrid的Options->dgRowSelect屬性為true時,該方法將失效。

9.7.6 獲取點中欄位的內容

開啟UniDBGrid的ClientEvents->ExtEvents屬性,選擇Ext.grid.Panel頁,雙擊其celledit事件,新增如下程式碼:

function cellclick(sender, td, cellIndex, record, tr, rowIndex, e, eOpts)

{

alert(sender.store.getAt(rowIndex).get(cellIndex));

}

         以上程式碼能夠實現顯示滑鼠點選的CELL。但是,測試發現,如果UniDBGrid設定了Options->dgRowSelect和dgRowNumbers等屬性,cellindex要相應的減去這些設定屬性導致新增的列數,比如表格設定了dgRowSelect屬性,則表格的第一列是勾選框,佔用了一列,alert(sender.store.getAt(rowIndex).get(cellIndex));

應該寫為

alert(sender.store.getAt(rowIndex).get(cellIndex-1));

 

9.7.7 設定隔行變色和特徵行變色

有時需要讓表格的奇數行和偶數行分別顯示不同的背景顏色,有時又需要根據某個欄位的特徵值設定其記錄背景色,雙擊UniDBGrid的OnDrawColumnCell新增事件:

procedure TUniFrame1.UniDBGrid1DrawColumnCell(Sender: TObject; ACol,

  ARow: Integer; Column: TUniDBGridColumn; Attribs: TUniCellAttribs);

begin

if Column.Field.DataSet.RecNo mod 2=0 then

  begin

    Attribs.Color:=clBlue;

  end

else

  begin

    Attribs.Color:=clRed;

  end;

if Column.Field.DataSet.FieldByName('護照編號').AsString='HZ002' then

  begin

    Attribs.Color:=clYellow;

  end;

end;

相關文章