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按钮

步骤如下（示例）：

1. 在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': '记录总数:'   
      }  
     ]  
     );  
}  

2. 在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'