关于reactgrid的信息

React之卡片拖拽移动

管理页面我们通常能看到一连串的卡片，以很明显的方式对用户进行提示，也可以是图表嵌在卡片的形式直观展示。那就会存在一个需求，用户可以自定义自己想要的卡片布局，其实也就是自定义宽高这样。

可以看到这里监听了页面的 resize ，然后进行 onWindowResize 方法，我们在其他页面进行 resize 之后，也会触发这个方法，这也是我前面要强调一下路由切换不会 unmount 的原因，这里的 resize 没法得到正确的 node.offsetWidth ，所以样式错乱了，那怎么办呢？

首先我想着，在这个页面写一个时钟，不停的 js 去触发 resize 事件，让它在切换页面的时候重新计算，这样肯定是ok的，但是这样肯定会有性能问题，因为不停的延时调用，这样我就得想个办法，不那么频繁的刷新了，怎么做呢?

路由切换，页面也切换了，那组件肯定会触发 receiveProps 钩子，那我在这里判断一下当前页面的路由，如果是当前路由，那就刷新一下（dispatchEvent('resize'))，这样就做到只是进入这个页面就刷新，比时钟要好一些。但是这样还是很low，因为进入其他页面没有 resize 操作，只要返回这个页面就会刷新，接下来我就要优化一下，只有当其他页面 resize 了之后，回到当前页才 dispatchEvent('resize') 。

页面挂载的时候就进行 resize 监听，当发生 resize 事件之后进行一下路由判断，如果是其他页面，就改变 state 里的一个值，返回到当前页之后进行一下 state 的值判断，为 true 才刷新。

为了页面切换的时候更合理一些（不展示错乱的页面），加个 loading 延时一秒过度一下，还要记得 unmount 时去除掉 resize 监听。

这里的图表用的是 bizcharts ，它会监听页面 resize 的变化，但是当我们改变宽高的时候，发现没有自适应，一开始我的解决方法是把这个渲染的 canvas 设置为 width：100% ，这样能使它拉伸开，但是很丑，因为是相当于是放大，这样效果太不好了，所以也要解决这个问题。

React-Grid-Layout 组件有一个 props ， onResize 事件返回当前改变宽高这样的事件回调，我们在这个回调里手动触发一下页面 resize 事件，以实现 bizcharts 的自适应。

文章链接：

react-grid-layout：可拖拽缩放网格布局插件

react-grid-layout

????React-Grid-Layout 是一个网格布局系统，具有响应性并支持断点（breakpoints）。断点布局可以由用户提供或自动生成。

RGL 仅支持 React，不支持 jQuery。

????使用npm安装 React-Grid-Layout：

????样式表：

????下面的示例将生成一个包含三个项目的网格，其中：

? ? 1.????用户将无法拖动或调整项目大小 a

? ? 2.????b 将被限制为最小宽度为 2 个网格块和最大宽度为 4 个网格块

? ? 3.????用户将能够自由拖动和调整项目大小 c

可以选择直接在子项上设置布局属性：

????ResponsiveReactGridLayout和ReactGridLayout采取width来计算拖动事件位置。在简单的情况下，WidthProvider可以使用HOC在初始化和窗口调整大小事件时自动确定宽度。

????// 除使用 WidthProvider情况外必填

? ?? width: number,

????// 如果为 true，容器高度自适应内容

? ?? autoSize: ?boolean = true ,

????//布局中的列数。

? ?? cols: ?number = 12 ,

????// 取消拖拽时的css选择器

? ?? draggableCancel: ?string = '' ,

????// 拖拽时的css选择器

? ?? draggableHandle: ?string = '' ,

????// 紧凑排列类型

? ?? compactType: ?( 'vertical' | 'horizontal' ) = 'vertical' ;

????// 布局，格式为数组对象，例如：

????// {x: number, y: number, w: number, h: number}

????// 布局中的索引必须与每个项目组件上使用的键匹配。

????// 如果您选择使用自定义键，则可以在布局中指定该键

????// 数组对象，如下所示：

????// {i: string, x: number, y: number, w: number, h: number}

????//如果父组件没有设置layout，则需要在子组件设置 data-grid

? ?? layout: ?array = null ,

????//? [x, y] 的margin值

? ?? margin: ?[number, number] = [ 10 , 10 ],

????//? [x, y] 的padding值

? ?? containerPadding: ?[number, number] = margin,

????// 行高，可根据 breakpoints 改变

? ?? rowHeight: ?number = 150 ,

????// 放置元素的配置。放置元素是一个从外部拖动某个元素时会出现的虚拟元素。

????//? i - 元素的id

????//? w - 元素的宽

????//? h - 元素的高

? ?? droppingItem?: { i : string, w : number, h : number }

????// 是否可拖拽

? ?? isDraggable: ?boolean = true ,

????//是否可重置大小

? ?? isResizable: ?boolean = true ,

????//是否可设置边界

? ?? isBounded: ?boolean = false ,

????// 使用 CSS3 translate() 替换position 的top/left ，可提升大约6倍性能

? ?? useCSSTransforms: ?boolean = true ,

????//如果 ResponsiveReactGridLayout 或 ReactGridLayout 的父节点具有 "transform: scale(n)" 属性，应该设置缩放系数以避免拖动时出现渲染伪影。

? ?? transformScale: ?number = 1 ,

????//是否允许重叠

? ?? allowOverlap: ?boolean = false ,

????//如果为 true，则网格项在被拖动时不会改变位置

? ?? preventCollision: ?boolean = false ,

????// 如果为true, 带有`draggable={true}`属性的放置元素可被放置在网格上

????//注意：如果使用 Firefox，应该添加

????// `onDragStart={e = e.dataTransfer.setData('text/plain', ' ')}` 属性

????// 连同 `draggable={true}` 否则此功能将无法正常工作。

????// Firefox 需要 onDragStart 属性来进行拖动初始化

????//

? ?? isDroppable: ?boolean = false ,

????// 重置大小时的操作位置，默认右下

????// 可选值：

????// 's' - South handle (bottom-center)

????// 'w' - West handle (left-center)

????// 'e' - East handle (right-center)

????// 'n' - North handle (top-center)

????// 'sw' - Southwest handle (bottom-left)

????// 'nw' - Northwest handle (top-left)

????// 'se' - Southeast handle (bottom-right)

????// 'ne' - Northeast handle (top-right)

? ?? resizeHandles: ? Array 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne' = [ 'se' ],

????// 自定义重置大小图标

? ? ? resizeHandle?: ReactElement any | ((resizeHandleAxis: ResizeHandleAxis , ref: ReactRef HTMLElement ) = ReactElement any ),

????// 布局变化回调

? ?? onLayoutChange: (layout: Layout ) = void ,

????// 下面的所有回调都有签名（layout、oldItem、newItem、placeholder、e、element）。

????// 'start' 和 'stop' 回调为 'placeholder' 传递 `undefined`。

? ? ? type ItemCallback = (layout: Layout , oldItem: LayoutItem , newItem: LayoutItem , placeholder: LayoutItem , e: MouseEvent , element: HTMLElement ) = void ,

????// 拖拽开始回调

? ?? onDragStart: ItemCallback ,

????// 拖拽中回调

? ?? onDrag: ItemCallback ,

????// 拖拽停止回调

? ?? onDragStop: ItemCallback ,

????// 开始重置大小回调

? ?? onResizeStart: ItemCallback ,

????// 重置大小中的回调

? ?? onResize: ItemCallback ,

????// 重置大小结束回调

? ?? onResizeStop: ItemCallback ,

????// 当元素从外部放入网格时的回调。

? ?? onDrop : (layout: Layout , item: ? LayoutItem , e: Event ) = void ,

????// 当一个元素从外面拖过网格时调用， 此回调应返回一个对象以动态更改 dropItem大小

? ?? onDropDragOver : (e: DragOverEvent ) = ?({ | w?: number, h?: number | } | false ),

????// 可以使用它来代替常规 ref 和已弃用的 `ReactDOM.findDOMNode()` 函数

? ?? innerRef: ? React . Ref "div" ,

????// Breakpoint名称是任意的，但是必须在cols 和 layouts 对象中匹配。

? ?? breakpoints: ? Object = { lg : 1200 , md : 996 , sm : 768 , xs : 480 , xxs : 0 },

????// 列数

? ?? cols: ? Object = { lg : 12 , md : 10 , sm : 6 , xs : 4 , xxs : 2 },

????//[x,y]的margin

? ?? margin: [number, number] | {[breakpoint: $Keys breakpoints ]: [number, number]},

????// [x,y]的padding

? ?? containerPadding: [number, number] | {[breakpoint: $Keys breakpoints ]: [number, number]},

????// 布局配置

? ?? layouts: {[key: $Keys breakpoints ]: Layout },

????// breakpoint发生变更时的回调

? ?? onBreakpointChange: (newBreakpoint: string, newCols: number) = void ,

????// 布局发生变更时的回调

? ?? onLayoutChange: (currentLayout: Layout , allLayouts: {[key: $Keys breakpoints ]: Layout }) = void ,

????// 宽度改变时的回调，可以根据需要修改布局。

? ?? onWidthChange: (containerWidth: number, margin: [number, number], cols: number, containerPadding: [number, number]) = void ;

????{?

????????// 组件id

? ?????? i : string,?

????????// 以下单位为网格，不是px

? ?????? x : number,?

? ?????? y : number,?

? ?????? w : number,?

? ?????? h : number,?

? ?????? minW : ?number = 0 ,?

? ?????? maxW : ?number = Infinity ,?

? ?????? minH : ?number = 0 ,?

? ?????? maxH : ?number = Infinity , ?

????????// 如果为 true，则等于 `isDraggable: false, isResizable: false`。

? ?????? static : ?boolean = false ,?

????????// 如果为 false，则不可拖动。覆盖 `static`.?

? ?????? isDraggable : ?boolean = true ,?

????????// 如果为 false，则不可重置大小。覆盖 `static`.?

? ?????? isResizable : ?boolean = true , ?

????????// 默认情况下，调整大小图标仅显示在右下（东南）角。?

????????// 请注意，从顶部或左侧调整大小通常不直观。

? ?????? resizeHandles ?: ? Array 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne' = [ 'se' ]?

????????//如果为 true 且可拖动，则项目将仅在网格内移动。

? ?????? isBounded: ?boolean = false

????}

react grid 在苹果电脑不适用

确实。

React-Grid-Layout 是只提供给 React 组件并且不需要使用 JQuery 的栅格布局系统，类似的像：Packery 和 Gridster，但 RGL 是响应式的，并且支持 breakpoints 断点，用户可以自定义设置断点，也可以由 RGL 自动生成。

react 关于ag-grid自定义pin

最近一直忙着做前端，我们公司用的是react，这里表格使用的是ag-grid，参见aggrid的官网 ，发现想用自定义pin的话，只需要调用setColumnPined方法即可，但是我们必须拿到columnIpa，所以我们需要自定义一个CustomHeader文件放在frameworkComponents里面，如下图，这样便可以直接拿到aggrid的一下ipa，

在render的时候，将this.frameworkComponents通过props传给aggrid，OSAgGrid是我们自定义的文件，便于处理aggrid

OSAgGrid文件下，通过mergedProps接收上个页面传来的值

customHeader.js

不光自定义了pin，还自定义了sort，同时处理了上传

react-grid-layout有没有精通一些的大神？

只需要看一下相对布局和线性布局就可以了，做了十几个app了，基本都是用的这两个

基于react-grid-layout实现可视化拖拽

做前端的小伙伴们可能会经常遇到做一个自定义dashboard这样的需求。

那么什么是自定义dashboard呢？自定义dashboard其实就是一个自定义面板，用户能够在面板上自由的拖拽，新增，删除组件。组件可以是各种echarts图形，也可是各种数据表格。通过各个组件的拖拽组合，从而让用户自定义想要看到的面板。

demo地址

源码地址

首先，在js文件中引入WidthProvider和Responsive组件，并且实例化响应式拖拽组件。

其次，在css文件中引入插件的样式。

在React的render方法中渲染可拖拽布局。ResponsiveReactGridLayout组件有多个属性，这里举几个比较重要的说明一下：

通过generateDOM函数生成布局中的组件,首先先遍历组件数组，通过每个组件的类型判断生产柱状图组件，折线组件，还是饼图组件。每个组件必须定义一个全局唯一的key值。data-grid为每一个组件绑定了其属性。下面会介绍具体的data-grid属性。

每个组件属性如下：

感谢支持。若不足之处，欢迎大家指出，共勉。

如果觉得不错，记得 点赞，谢谢大家 ??