欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DataGear 表格图表常用配置示例

程序员文章站 2024-02-12 18:12:40
...

DataGear 内置表格图表底层采用的是DataTable表格组件,在数据可视化看板中,可以通过dg-chart-options设置表格选项,具体选项可参考https://datatables.net/reference/option/,本文仅列出一些常用配置示例。

注意:下面这些配置示例需要DataGear-2.1.1及以上版本。

  • 自定义列属性(标题、列宽、是否可排序等)
<script type="text/javascript">
var tableOptions=
{
  columns:
  [
    {
      //标题
      title: "自定义标题",
      
      //列宽:"100px"、"20%"
      width: "100px",
      
      //是否可排序
      orderable: false,
      
      //是否可见
      visible: false
    },
    ...
  ]
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...
  • 客户端分页
<script type="text/javascript">
var tableOptions=
{
  //开启分页
  paging: true,
  
  //可选,自定义页大小下拉框
  lengthMenu: [ 10, 25, 50, 75, 100 ],
  
  //可选,默认页大小
  pageLength: 50
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...
  • 固定列
<script type="text/javascript">
var tableOptions=
{
  fixedColumns:
  {
    //左边固定列数
    leftColumns: 1,
	
    //右边固定列数
    rightColumns: 1
  }
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...
  • 添加序号列
<script type="text/javascript">
var tableOptions=
{
  //添加一个序号列
  processRenderOptions: function(options)
  {
    var columns = options.columns;
    
    columns.unshift(
    {
      title: "序号",
      orderable: false,
      data: "",
      render: function(value, type, row, meta)
      {
        return "";
      }
    });
  },
  
  //设置序号列值
  rowCallback: function(row, data, displayNum, displayIndex, dataIndex)
  {
    $("td:first", row).html(displayIndex);
  }
};
</script>
...
<div dg-chart-options="tableOptions" dg-chart-widget="..."></div>
...

官网地址:
http://www.datagear.tech

源码地址:
Gitee:https://gitee.com/datagear/datagear
Github:https://github.com/datageartech/datagear

大屏模板地址:
https://gitee.com/datagear/DataGearDashboardTemplate

相关标签: 可视化