Skip to content

Commit fbe0dbf

Browse files
uptonkinguptonking
committed
chore: grid
1 parent 9c909dd commit fbe0dbf

8 files changed

+458
-49
lines changed

‎docs-ag-grid.md

Lines changed: 216 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,226 @@
22
title: docs-ag-grid
33
tags: [ag-grid, docs, grid, list, table]
44
created: '2020-07-14T13:01:37.940Z'
5-
modified: '2020-07-14T13:02:06.602Z'
5+
modified: '2020-08-05T04:35:33.164Z'
66
---
77

88
# docs-ag-grid
99

10+
## ag-grid表格组件ui结构层次
11+
12+
- ag-root-wrapper: 最顶层容器，ref是eRootWrapper
13+
- ag-root-wrapper-body
14+
- ag-tab-guard-top
15+
- **ag-root**: 这里是grid component的根组件
16+
- ag-header
17+
- ag-pinned-left-header
18+
- ag-header-viewport: 这里是表头内容
19+
- ag-pinned-right-header
20+
- ag-floating-top: 所有子节点都没有text
21+
- ag-body-viewport
22+
- ag-pinned-left-cols-container
23+
- ag-center-cols-clipper: 这里是内容区
24+
- ag-center-cols-viewport
25+
- ag-center-cols-container
26+
- ag-row
27+
- **ag-row**: 行组件
28+
- **ag-cell**: 最内层单元格，内容直接是文字
29+
- ag-row
30+
- ag-pinned-right-cols-container
31+
- ag-full-width-container: 无text
32+
- ag-floating-bottom
33+
- ag-body-horizontal-scroll
34+
- ag-overlay
35+
- ag-tab-guard-bottom
36+
- ag-paging-panel: 默认隐藏分页组件
37+
38+
``` CSS
39+
.ag-root {
40+
position: relative;
41+
flex: 1 1 auto;
42+
display: flex;
43+
/* 竖向放置header，body，paging */
44+
flex-direction: column;
45+
width: 0;
46+
height: 100%;
47+
overflow: hidden;
48+
}
49+
50+
.ag-header {
51+
position: relative;
52+
display: flex;
53+
flex-direction: row;
54+
width: 100%;
55+
min-height: 49px;
56+
overflow: hidden;
57+
}
58+
59+
.ag-body-viewport {
60+
position: relative;
61+
flex: 1 1 auto;
62+
display: flex;
63+
/* 水平放置左固定列，表格内容，右固定列 */
64+
flex-direction: row;
65+
min-width: 0;
66+
height: 100%;
67+
overflow: hidden;
68+
overflow-y: auto;
69+
}
70+
71+
.ag-center-cols-clipper {
72+
/* 父元素ag-body-viewport，是flex容器 */
73+
display: block;
74+
flex: 1;
75+
min-width: 0;
76+
min-height: 100%;
77+
height: 361956px;
78+
overflow: hidden;
79+
}
80+
81+
.ag-center-cols-viewport {
82+
/* 父元素ag-center-cols-clipper，是display block */
83+
position: relative;
84+
flex: 1 1 auto;
85+
display: block;
86+
min-width: 0;
87+
width: 100%;
88+
/* height开始是100% */
89+
height: calc(100% + 15px);
90+
overflow: hidden;
91+
overflow-x: auto;
92+
}
93+
94+
.ag-center-cols-container {
95+
position: relative;
96+
display: block;
97+
width: 1590px;
98+
height: 361956px;
99+
}
100+
101+
.ag-row {
102+
position: absolute;
103+
top: 42*Npx;
104+
display: block;
105+
106+
width: 100%;
107+
height: 42px;
108+
109+
transition: background-color .1s;
110+
}
111+
112+
.ag-cell {
113+
position: absolute;
114+
left: 200*Npx;
115+
display: inline-block;
116+
117+
width: 200px;
118+
/* height实际是41px */
119+
height: 100%;
120+
overflow: hidden;
121+
border: 1px solid transparent;
122+
123+
line-height: 40px;
124+
white-space: nowrap;
125+
text-overflow: ellipsis;
126+
}
127+
```
128+
129+
- ### ag-grid的row span基于z-index实现
130+
- 给需要合并的单元格元素中第一个元素加上class: cell-span ag-cell-focus
131+
- 必需设置背景，如果background不设置，则默认transparent，仍可以看见下层单元格
132+
- 同时使用行内样式控制第一个单元格的高度，主要是增加单元格的高度来模拟合并单元格的视觉效果
133+
- `style="width: 200px; left: 0px; height: 84px; z-index: 1;"`
134+
- 对除第一个单元格外的其他单元格，不需要处理样式，作为普通单元格显示，但被第一个单元格挡住了
135+
- ref
136+
- [ag-grid row spanning simple example preview](https://www.ag-grid.com/example-runner/grid-vanilla.php?section=javascript-grid-row-spanning&example=row-spanning-simple)
137+
138+
``` CSS
139+
.rowspan-cell-style {
140+
z-index: 1;
141+
position: absolute;
142+
left: 200*Npx;
143+
display: inline-block;
144+
145+
width: 200px;
146+
/* height实际是84px */
147+
height: 40*spanpx;
148+
white-space: nowrap;
149+
}
150+
151+
.cell-span {
152+
background-color: #00e5ff;
153+
}
154+
155+
.ag-cell-focus {
156+
/* 为空 */
157+
}
158+
```
159+
160+
- ### ag-grid的column span基于position-absolute实现
161+
- 使用行内样式控制合并后单元格的宽度
162+
- `style="width: 600px; left: 0px;"`
163+
- 合并后单元格显示的位置由行内样式left控制
164+
- 合并列后的单元格在源码上是位于ag-row一行单元格的最后面的，然后通过 `colindex=3` 可设置其列顺序
165+
- 对于某些没有合并列单元格的行ag-row，其单元格在源码上的顺序仍然在一行的最后，对应其他行被合并的位置上
166+
- 至少被合并的那列单元格是在最后
167+
- 紧跟着的那列也在最后
168+
169+
## Row Spanning
170+
171+
- By default, each cell will take up the height of one row.
172+
- You can change this behaviour to allow cells to span multiple rows.
173+
- This feature is similar to 'cell merging' in Excel or 'row spanning' in HTML tables.
174+
- To allow row spanning, the grid must have property `suppressRowTransform=true` to turn off row translation.
175+
- `suppressRowTransform=true` is used to stop the grid positioning rows using CSS `transform` and instead the grid will use CSS `top` .
176+
- The reason row span will not work with CSS transform is that CSS transform creates a stacking context which constrains(限制) CSS `z-index` from placing cells on top of other cells in another row.
177+
- Having cells extend into other rows is necessary for row span which means it will not work when using CSS transform.
178+
- The downside to not using transform is performance; row animation (after sort or filter) will be slower.
179+
- Row spanning is then configured at the column definition level.
180+
- To have a cell span more than one row, return how many rows to span in the callback `colDef.rowSpan` .
181+
- Row Spanning Simple Example
182+
- The Athlete column is configured to apply a CSS class to give a background to the cell.
183+
- This is important because if a background was not set, the cell background would be `transparent` and the underlying cell would still be visible.
184+
- Row Spanning Complex Example
185+
- Column Show row spans by 4 rows when it has content.
186+
- Column Show uses CSS class rules to specify background and border.
187+
- Column Show has a custom cell renderer to make use of the extra space.
188+
189+
- ### Constraints with Row Spanning
190+
- Row Spanning breaks out of the row/cell calculations that a lot of features in the grid are based on.
191+
- If using Row Spanning, be aware of the following:
192+
- Responsibility is with the developer to not span past the last row.
193+
- This is especially true if sorting and filtering
194+
- (e.g. a cell may span outside the grid after the data is sorted and the cell's row ends up at the bottom of the grid).
195+
- Responsibility is with the developer to apply a `background` style to spanning cells so that overwritten cells cannot be seen.
196+
- Overwritten cells will still exist, but will not be visible.
197+
- This means cell navigation will go to the other cells - e.g. if a row spanned cell has focus, and the user hits the 'arrow down' key, the focus will go to a hidden cell.
198+
- Row span does not work with dynamic row height or auto-height.
199+
- The row span assumes default row height is used when calculating how high the cell should be.
200+
- Sorting and filtering will provide strange results when row spanning.
201+
- For example a cell may span 4 rows, however applying a filter or a sort will probably change the requirements of what rows should be spanned.
202+
- Range Selection will not work correctly when spanning cells.
203+
- This is because it is not possible to cover all scenarios, as a range is no longer a perfect rectangle.
204+
205+
## Column Spanning
206+
207+
- By default, each cell will take up the width of one column.
208+
- You can change this behaviour to allow cells to span multiple columns.
209+
- This feature is similar to 'cell merging' in Excel or 'column spanning' in HTML tables.
210+
- Column spanning is set configured at the column definition level.
211+
- To have a cell span more than one column, return how many columns to span in the callback `colDef.colSpan` .
212+
- Column Spanning Simple Example
213+
- Resizing any columns that are spanned over will also resize the spanned cells.
214+
- For example, resizing the column immediately to the right of 'Country' will resize all cells spanning over the resized column.
215+
- The first two columns are pinned.
216+
- If you drag the country column into the pinned area, you will notice that the spanning is constrained within the pinned section, e.g. if you place Country as the last pinned column, no spanning will occur, as the spanning can only happen over cells in the same region, and Country now has no further columns inside the pinned region.
217+
- Column Spanning Complex Example
218+
- The data is formatted in a certain way, it is not intended for the user to sort this data or reorder the columns.
219+
- The dataset has meta-data inside it, the `data.section` attribute.
220+
- This meta-data, provided by the application, is used in the grid configuration in order to set the column spans and the background colours.
221+
- ### Column Spanning Constraints
222+
- Range Selection will not work correctly when spanning cells.
223+
- This is because it is not possible to cover all scenarios, as a range is no longer a perfect rectangle.
224+
10225
## DOM Virtualisation
11226

12227
- https://www.ag-grid.com/javascript-grid-dom-virtualisation/

‎docs-web-html-dom-element-api.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: docs-web-html-dom-element-api
3+
tags: [docs, dom, web]
4+
created: '2020-08-05T12:22:15.902Z'
5+
modified: '2020-08-05T12:29:43.618Z'
6+
---
7+
8+
# docs-web-html-dom-element-api
9+
10+
## Element
11+
12+
### Element.clientHeight
13+
14+
- This read-only property is zero for elements with no CSS or inline layout boxes;
15+
- otherwise, it's the inner height of an element in pixels
16+
- It includes padding but excludes borders, margins, and horizontal scrollbars (if present).
17+
- clientHeight can be calculated as: CSS height + CSS padding - height of horizontal scrollbar (if present).
18+
- This property will round the value to an integer.
19+
- If you need a fractional value, use `element.getBoundingClientRect()` .
20+
21+
- When `clientHeight` is used on the root element (the `<html>` element), (or on `<body>` if the document is in quirks mode), the viewport's height (excluding any scrollbar) is returned.
22+
- This is a special case of clientHeight.

‎lib-ag-grid-faq.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: lib-ag-grid-faq
3+
tags: [ag-grid, faq, lib]
4+
created: '2020-08-05T09:28:52.117Z'
5+
modified: '2020-08-05T09:30:37.370Z'
6+
---
7+
8+
# lib-ag-grid-faq

‎lib-ag-grid-latest-roadmap.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: lib-ag-grid-latest-roadmap
3+
tags: [ag-grid, lib, roadmap]
4+
created: '2020-08-05T09:30:42.434Z'
5+
modified: '2020-08-05T09:31:14.221Z'
6+
---
7+
8+
# lib-ag-grid-latest-roadmap

‎lib-react-virtualized-dev.md

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: lib-react-virtualized-dev
3+
tags: [lib, list, react-virtualized]
4+
created: '2020-08-05T09:34:25.307Z'
5+
modified: '2020-08-05T09:35:05.094Z'
6+
---
7+
8+
# lib-react-virtualized-dev
9+
10+
## Rendering large lists with React Virtualized
11+
12+
- [Rendering large lists with React Virtualized_201805](https://blog.logrocket.com/rendering-large-lists-with-react-virtualized-82741907a6b3/)
13+
14+
- So many elements in the DOM can cause two problems:
15+
- Slow initial rendering
16+
- Laggy scrolling
17+
- However, if you scroll through the list, you may not notice any lagging. After all, the app isn’t rendering something complex.
18+
- If you’re using Chrome, follow these steps to do a quick test:
19+
- Open the Developer tools panel.
20+
- Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux) to open the Command Menu.
21+
- Start typing Rendering in the Command Menu and select Show Rendering.
22+
- In the Rendering tab, enable FPS Meter.
23+
- Scroll through the list one more time.
24+
- In my case, the frames went from 60 to around 38 frames per second
25+
26+
- ### How does react-virtualized work?
27+
- The main concept behind virtual rendering is rendering only what is visible.
28+
- There are one thousand comment items in the app, but it only shows around ten at any moment (the ones that fit on the screen), until you scroll to show more.
29+
- So it makes sense to load only the elements that are visible and unload them when they are not by replacing them with new ones.
30+
- React-virtualized **implements virtual rendering** with a set of components that basically work in the following way:
31+
- They calculate which items are visible inside the area where the list is displayed (the viewport).
32+
- They use a container (div) with relative positioning to absolute position the children elements inside of it by controlling its top, left, width and height style properties.
33+
- There are five main components:
34+
- Grid.
35+
- It renders tabular data along the vertical and horizontal axes.
36+
- List.
37+
- It renders a list of elements using a Grid component internally.
38+
- Table.
39+
- It renders a table with a fixed header and vertically scrollable body content.
40+
- It also uses a Grid component internally.
41+
- Masonry.
42+
- It renders dynamically-sized, user-positioned cells with vertical scrolling support.
43+
- Collection.
44+
- It renders arbitrarily positioned and overlapping data.
45+
- On the other hand, react-virtualized also includes some HOC components:
46+
- ArrowKeyStepper.
47+
- It decorates another component so it can respond to arrow-key events.
48+
- AutoSizer.
49+
- It automatically adjusts the width and height of another component.
50+
- CellMeasurer.
51+
- It automatically measures a cell’s contents by temporarily rendering it in a way that is not visible to the user.
52+
- ColumnSizer.
53+
- It calculates column-widths for Grid cells.
54+
- InfiniteLoader.
55+
- It manages the fetching of data as a user scrolls a List, Table, or Grid.
56+
- MultiGrid.
57+
- It decorates a Grid component to add fixed columns and/or rows.
58+
- ScrollSync.
59+
- It synchronizes scrolling between two or more components.
60+
- WindowScroller.
61+
- It enables a Table or List component to be scrolled based on the window’s scroll positions.
62+
- If we look at the elements of the page in the developer tools tab, you’ll see that now the rows are placed inside two additional div elements
63+
- **react-virtualized的ui结构层次**
64+
- list
65+
- grid/GridReactVirtualized__List
66+
- Grid__innerScrollContainer
67+
- row
68+
- row
69+
- row
70+
- The outer div element (the one with the CSS class `GridReactVirtualized__List` ) has the width and height specified in the component (800px and 600px, respectively), has a `relative` position and the value `auto` for `overflow` (to add scrollbars).
71+
- The inner div element (the one with the CSS class `Grid__innerScrollContainer` ) has a max-width of 800px but a `height` of `50000px` , the result of multiplying the number of rows (1000) by the height of each row (50).
72+
- It also has a `relative` position but a `hidden` value for `overflow` .
73+
- All the rows are children of this div element, and this time, there are not one thousand elements.
74+
- However, there are not eight or nine elements either. There’s like ten more.
75+
- That’s because the List component renders additional elements to reduce the chance of flickering due to fast scrolling.
76+
- The number of additional elements is controlled with the property `overscanRowCount` .
77+
- The downside is that you have to specify the `width` and `height` of the list as well as the `height` of the row.
78+
- Luckily, you can use the `AutoSizer` and `CellMeasurer` components to solve this.
79+
- The `AutoSizer` component will fill all of the available space of its parent so if you want to fill all the space after the header, in src/App.css, you can add the following line to the list class:
80+
81+
``` CSS
82+
.list {
83+
height: calc(100vh - 210px)
84+
}
85+
```
86+
87+
- The `vh` unit corresponds to the height to the viewport (the browser window size), so `100vh` is equivalent to `100%` of the height of the viewport.
88+
- 210px are subtracted because of the size of the header (200px) and the padding that the list class adds (10px).
89+
- If you resize the window, the list height should adjust automatically
90+
- Calculating the height of a row automatically
91+
- If you want to have dynamic height, you have to use the `CellMeasurer` component.

0 commit comments

Comments
 (0)