DataGear 數據可視化表格圖表常用配置示例

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=
{
  //開啓排序
  ordering: true,
  
  //第一列升序、第二列降序
  order: [[ 0, 'asc' ], [ 1, 'desc' ]]
};
</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>
...

• 輪播

...
<div dg-chart-options="{carousel: true}" dg-chart-widget="..."></div>
...

表格輪播詳細設置項參考：

http://datagear.tech/documentation/#dashboardEleAttr_dg-chart-options

中的【表格】圖表配置說明，另參考文章：DataGear 製作按行滾動的輪播表格數據可視化看板

官網地址：http://www.datagear.tech

源碼地址：

Gitee：https://gitee.com/datagear/datagear

Github：https://github.com/datageartech/datagear

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