uniDBGrid的相关样式设置

1.自适应列宽

代码如下（示例）：

function store.load(sender, records, successful, operation, eOpts)
{sender.grid.columnManager.columns.forEach(function(col){col.autoSize()})
}

在这里插入图片描述

2.显示page当前记录及总记录数

在这里插入图片描述

代码如下（示例）：

function pagingBar.beforeInit(sender, config)
{config.displayInfo = true;
}

效果：
在这里插入图片描述

3.增加显示记录数的label及隐藏refresh按钮

步骤如下（示例）：

在UniDBgrid的extEvent属性中写入以下代码：

function OnAfterCreate(sender)  
{  var toolbar=sender.getDockedItems()[1]; //取出固定在bottom的ToolBar  toolbar.items.getAt(10).hide(); //取出ToolBar中的Refresh按钮，序号10,隐藏他  //增加一个显示总记录数的tbtext  toolbar.add(  [{  'id':'pagecount99',  'xtype':'tbtext',  'text': '记录总数:'   }  ]  );  
}

在Delphi中数据集有变化的地方写入类似代码，这里是在uniFormShow事件中：

procedure TMainForm.UniFormShow(Sender: TObject);  
begin  ClientDataSet1.Last;  UniSession.AddJS(Format('Ext.getCmp("pagecount99").setText("%s");',[' 记录数:'+inttostr(clientdataset1.recordcount)]));  
end;

效果：
在这里插入图片描述

4.内容自动换行

代码如下（示例）：

//添加样式：
.x-grid-cell-inner {white-space: initial;
}

5.锁定某行某列

在这里插入图片描述
代码如下（示例）：

function beforeedit(editor, context, eOpts)
{var FixedRow, FixedCol;FixedRow = 3;FixedCol = 3;  if (editor.cmp.uniRow < FixedRow || editor.cmp.uniCol < FixedCol){return false;}
}

6.获取选中的内容

在这里插入图片描述

代码如下（示例）：

function cellclick(sender, td, cellIndex, record, tr, rowIndex, e, eOpts)
{alert(sender.store.getAt(rowIndex).get(cellIndex));
}

7.设置header属性

方式一：
代码如下（示例）：

.x-column-header{/*表头设置*/
color:black;/*字体颜色*/
font-size:13px;/*字体大小*/
height: 50px;/*表头高度*/
border: none;/*表头框线*/
background:#C1C1C1;//表头背景*/
}
.GridLotacao .x-grid-column {    height: 50px;
}
.GridLotacao .x-grid-cell {    height: 50px !important;line-height: 50px !important;
}

方式二：
代码如下（示例）：

.kls-grid .x-column-header
{background-color: #F7F7F7;background-image:initial;/* border-width: 0px !important;  */border-right: 0px solid #e0e0e0;height:30px; 
}
.kls-grid .x-grid-header-ct{background-color: #F7F7F7;background-image:initial;border:initial;border-bottom-width: 1px !important;border-bottom-color: #E4E4E4 !important;border-bottom: 1px solid #E4E4E4 !important;height:30px; 
}

8.去掉鼠标右击

代码如下（示例）：

UniSession.AddJS('document.oncontextmenu = document.body.oncontextmenu = ' + '  
function (e){var s=true; e.path.forEach(function(el){' + '    
if(el.id!="" && "' + UniDBGrid1.JSId + '".includes(el.id)){s=false}' + '  
});' + 'return s}');

9.修改表格内容样式

在DBGgrid的DrawColumnCell事件中

代码如下（示例）：

Attribs.Style.Style := 'border: 2px solid green;border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;background-color: #5F9EA0 !important'