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>
...
源码地址:
Gitee:https://gitee.com/datagear/datagear
Github:https://github.com/datageartech/datagear
上一篇: 数据可视化
下一篇: 简易PHP路由,支持正反向url解析支持