zoukankan      html  css  js  c++  java
  • UniDBGrid控件的几个功能优化

    内容自动换行

    默认UniDBGrid的cell内的内容如果超出表格列宽并不自动换行和调整行高,给客户带来极大的不方便,通过修改ServerModule的属性CustomCSS可以实现。

    <style type="text/css">

    .x-grid-cell-inner {

      white-space: initial;

    }</style>

    鼠标停留显示字段

    如果某个表格字段内容太长,你想实现当鼠标移动到字段上方时以提示窗口形式显示字段内容,你可以在查询语句执行后设置表格对应字段的ShowToolTip属性实现。

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

    表格底部显示当前记录数和总记录数
             在UniDBGrid的ClientEvents->UniEvents属性中,选择Ext.toolbar.Paging,添加pagingBar.beforeInit事件,再运行表格后你会发现表格底部右侧将显示“显示1-10条,共120条”。

    function pagingBar.beforeInit(sender, config)

    {

    config.displayInfo = true;

    }

    自动设置列宽

    打开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()})

    }

    锁定某行某列        

    如果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时,该方法将失效。

    获取点中字段的内容
    打开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));

    设置隔行变色和特征行变色

    有时需要让表格的奇数行和偶数行分别显示不同的背景颜色,有时又需要根据某个字段的特征值设定其记录背景色,双击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;
    ————————————————
    版权声明:本文为CSDN博主「【路在脚下】」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/dlboy2018/article/details/103544149

  • 相关阅读:
    Flask 请求源码分析
    Flask 上下文管理
    flask-基础知识
    分布式爬虫
    数据结构
    webpack安装和入门
    vue相关
    vue入门
    修改npm全局安装模式的路径
    Vue2+VueRouter2+Webpack+Axios
  • 原文地址:https://www.cnblogs.com/AkumaIII/p/12052475.html
Copyright © 2011-2022 走看看