[英]Is splitting of an ag-Grid across multiple DIVs possible?
Working on a web-app project that uses ag-Grid for tabular data within a Vue2.js component, with 2 or 3 fields and a subsection accessible through a tree-format descending below each record. 在一个Web应用程序项目上工作,该项目使用ag-Grid来处理Vue2.js组件内的表格数据,具有2或3个字段,并且可以通过树状结构访问每个记录下方的子节。
Since the grid is so narrow, I'd like to have it span across several DIVs. 由于网格是如此狭窄,所以我希望它跨多个DIV。 The app is meant to be view-able on either desktops, tablets, or mobile phones, so responsive design of the tabular data is important (single column on mobiles, multiple columns (DIVs) on a desktop, for example). 该应用程序可以在台式机,平板电脑或手机上查看,因此表格式数据的响应式设计非常重要(例如,移动设备上为单列,台式机上为多列(DIV))。
Has anyone had experience with this? 有人对此有经验吗? Googling keeps throwing me back to the ag-Grid documentation on grouping an aggregation, but that does not really address what I am looking for. Googling一直让我回到关于聚合集合分组的ag-Grid文档,但这并不能真正满足我的需求。
Supporting image: 配套图片: Visual idea of what I'd like to accomplish...blue column just represents the start of the grid, and it's content wraps to the other columns. 我要完成的视觉效果...蓝色列仅表示网格的开始,其内容包含在其他列中。
It appears that modifying ag-Grid's table output structure (built conveniently with DIVs) using CSS3's Multi-column Layout support via display: inline-block
and column-count
is the direction of solution I am looking for. 似乎通过display: inline-block
使用CSS3的多列布局支持来修改ag-Grid的表输出结构(使用DIV方便地构建) display: inline-block
和column-count
是我正在寻找的解决方案的方向。
By applying them to the style for the DIV that emulates the outer <table>
rule/structure, it appears to 'auto split' the data rows within into the number of columns I decide. 通过将它们应用于模拟外部<table>
规则/结构的DIV样式,似乎可以将其中的数据行“自动拆分”为我决定的列数。 Next is to attempt to modify that using media queries based on screen width. 接下来是尝试使用基于屏幕宽度的媒体查询来修改它。
Fiddle example for using column-count
: https://jsfiddle.net/digitalmouse/9casq77v/ 使用column-count
小提琴示例: https : //jsfiddle.net/digitalmouse/9casq77v/
So unless anyone else can provide something even better, this looks like the way to go. 因此,除非其他人可以提供更好的东西,否则这似乎是必经之路。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.