DataGear中怎么实现一个数据可视化表格图表，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
自定义列属性（标题、列宽、是否可排序等）
计算
安全
数据库
网络和加速
企业服务
<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>
...看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4035217/blog/4905942
