React table component GridManager-React
GridManager React .The React-based GridManager package is used to conveniently use the GridManager in React. Except for the React features, other APIs are the same as the GridManager API.
Realize function
| Features | Description |
|---|---|
| Width adjustment | The column width of the table can be dragged and adjusted |
| Position change | Drag-and-drop adjustment of the column position of the table |
| Configure Columns | Columns can be displayed or hidden through configuration |
| Table head ceiling | In the case of a visible area of the table, the table head will always exist on the top |
| Column Fixed | Specify a column to be fixed on the left or right |
| Sorting | Single item sorting or combined sorting of table |
| Pagination | Form ajax pagination, including selecting the total number of items displayed on each page and jumping to the specified page function |
| User preference memory | Remember user behavior, including user-adjusted column width, column order, column visual status and the number of items displayed on each page |
| Serial number | Automatically generate serial number column |
| Select All | Automatically generate select all columns |
| Export | Static data export, dynamic data export, selected data export |
| Current page print | |
| Right-click menu | Common functions can be quickly operated in the menu |
| Filtering | Achieve quick search results by filtering columns |
| Merge | Cells with the same value in the same column can be automatically merged |
| Tree table | Tree table structure can be quickly realized through configuration |
| Row movement | Can quickly realize row position movement through configuration |
API
This document is the native GridManager document. The react version columnData.text columnData.template topFullColumn.templatecan be used in the same way except that the react template can be used in it.
Demo
This example is an example of the native GridManager. The react version columnData.text columnData.template topFullColumn.templatecan be used in the same way except that the react template can be used in it.
Core code
Development environment
ES2015 + webpack + React + GridManager
Reference in the project
- es2015 introduction method
import ReactGridManager from 'gridmanager-react';
import 'gridmanager-react/css/gm-react.css';
- Introduced by script tag
<link rel="stylesheet" href="../node_modules/gridmanager-react/css/gm-react.css">
<script src="../node_modules/gridmanager-react/js/gm-react.js"></script>
Example
<div id="example"></div>
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import GridManager from 'gridmanager-react';
import 'gridmanager-react/css/gm-react.css';
// Component: action column
function ActionInner ( props ) {
const actionAlert = event => {
alert ( 'The action bar th is rendered by the React template' ) ;
} ;
return < span onClick = { actionAlert } style = { { display : 'block' , color : 'red' } } > { props . text } < / span > ;
}
function ActionComponents(props) {
return <ActionInner text={props.text}/>;
}
// Component: empty template
function EmptyTemplate ( props ) {
return (
< section style = { { textAlign : 'center' } } >
{ props . Text }
< / section >
) ;
}
// 组件: 标题
function TitleComponents(props) {
return (
<a href={'https://www.lovejavascript.com/#!zone/blog/content.html?id=' + props.row.id} target={'_black'}>{props.row.title}</a>
);
}
// Component: type
function TypeComponents ( props ) {
// blog post type
const TYPE_MAP = {
'1' : 'HTML/CSS' ,
'2' : 'nodeJS' ,
'3' : 'javaScript' ,
'4' : ' 'Front-end chicken soup' ,
'5' : 'PM Coffee' ,
'6' : 'Front-end framework' ,
'7' : 'Front-end related'
} ;
return (
< button >{TYPE_MAP[props.type]}</button>
);
}
// Component: delete
function DeleteComponents ( props ) {
const { index , row } = props ;
const deleteAction = event => {
if ( window . Confirm ( `Confirm that you want to delete the current page [ ${ event . Target . GetAttribute ( ' data-index' ) } ] [' ${ event . target . title } ]?` ) ) {
console . log ( '----Delete operation start----' ) ;
GridManager . refreshGrid ( option . gridManagerName ) ;
console . log ( 'The data has not changed is normal, because this is just an example, and will not be true delete data '. ) ;
Console . log ( ' the operation is completed ---- ---- ' ) ;
}
} ;
return (
<span className={'plugin-action'} onClick={deleteAction} data-index={index} title={row.title}>删除</span>
);
}
// Table component configuration
const option = {
gridManagerName : 'testReact' ,
height : '100%' ,
emptyTemplate : < EmptyTemplate text = { 'This React table, there is no data' } / > ,
columnData : [ {
key : ' pic' ,
remind : 'the pic' ,
width : '110px' ,
text : 'thumbnail' ,
template : ( pic , row) => {
return (
<img style={{width: '90px', margin: '0 auto'}} src={'https://www.lovejavascript.com' + pic} title={row.name}/>
);
}
},{
key: 'title',
remind: 'the title',
text: '标题',
template: <TitleComponents/>
},{
key: 'type',
remind: 'the type',
text: '分类',
align: 'center',
template: (type, row, index) => {
return <TypeComponents type={type}/>;
}
},{
key : 'info' ,
remind : 'the info' ,
text : 'instructions for use'
} , {
key : 'username' ,
remind : 'the username' ,
text : 'author' ,
// Use the function to return the dom node
template : ( username , row , index ) => {
return (
< a href = { 'https://github.com/baukh789' } target = {'_black' } > { username } < / a >
) ;
}
} , {
key : 'createDate' ,
remind : 'the createDate' ,
width : '100px' ,
text : 'Create time' ,
sorting : 'DESC' ,
// Use function to return htmlString
template : function ( createDate , rowObject ) {
return new Date (createDate ) . toLocaleDateString ( ) ;
}
) , {
key : 'lastDate' ,
remind : 'the lastDate' ,
width : '120px' ,
text : 'last modified time' ,
sorting : '' ,
// use function to return htmlString
template : function ( lastDate , rowObject ) {
return new Date ( lastDate ) . toLocaleDateString( ) ;
}
} , {
key : 'action' ,
remind : 'the action' ,
width : '100px' ,
disableCustomize : true ,
text : < ActionComponents text = { 'Action' } / > ,
// Shortcut, will Automatically add row and index attributes to the props of the component
template : < DeleteComponents / >
} ] ,
supportRemind : true ,
isCombSorting: true,
supportAjaxPage: true,
supportSorting: true,
ajaxData: 'http://www.lovejavascript.com/blogManager/getBlogList',
ajaxType: 'POST',
};
// Render callback
const the callback = Query => {
Console . Log ( 'the callback =>' , Query ) ;
} ;
ReactDOM . The render (
< GridManager
option = { option } // CI option may be expanded in
height = { '100%' } // parameter commencement option will overwrite the value in
the callback = { the callback }
/ > ,
document . querySelector ( '#example' )
) ;
Call public method
Introduce GridManager through ES6 syntax.
import GridManager, {$gridManager} from 'gridmanager-react';
// Refresh the
GridManager . RefreshGrid ( 'testReact' ) ; // or $gridManager.refreshGrid('testReact');
// Update query conditions
GridManager . setQuery ( 'testReact' , { name : 'baukh' } ) ; // or $gridManager.setQuery('testReact', (name:'baukh'));
// ... For more, please visit API directly
View current version
Import GridManagerReact , { $ gridManager } from 'gridmanager-REACT' ;
Console . log ( 'GridManagerReact version =>' , GridManagerReact . Version ) ;
Console . log ( 'GridManager version =>' , $ gridManager . Version ) ;
Download Details:
Author: baukh789
Source Code: https://github.com/baukh789/GridManager-React
#react #reactjs #javascript
5.65 GEEK