GridManager React

React GridManager is a simple package to use in React. The React API is the same as the GridManager API except for the React feature.

Realize the function

function describe
Width adjustment Table column widths can be drag-and-drop adjusted
Position change The column position of the table is drag-and-drop adjusted
Configure the column Columns can be configured for show hide conversions
Suction top header In the case of a visible area of the table, the table header will always exist at the top
Column fixed Specifies that a column is fixed to the left or right
The sorting Tables are sorted individually or in groups
paging Table Ajax pagination, including the ability to select the total number of items displayed per page and jump to a specified page
User preference memory Remember user behavior, including user-adjusted column width, column order, column visual state, and number of columns per page
The serial number Automatically generate ordinal column
select all Automatically generate all selected columns
export Export static data, dynamic data, and selected data
print Current page print
Right-click menu Common functions can be quickly operated on the menu
filter Fast search results are achieved by filtering columns
merge Cells with the same value under the same column can be automatically merged
The tree form You can quickly configure the tree table structure
Line of mobile Row position movement can be quickly configured

API

Columndata.text Columndata.template topFullColumn. Template Uses the React template in the same way as the react template.

  • API

Demo

Columndata.text Columndata.template topFullColumn. Template Uses the React template in the same way as the react template.

  • Simple example
  • Complex example

Core code

  • GridManager
  • jTool

The development environment

ES2015 + webpack + React + GridManager

Project reference

  • Es2015 import mode
import ReactGridManager, {$gridManager} from 'gridmanager-react';
import 'gridmanager-react/css/gm-react.css';
Copy the code
  • Introduced by the 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>
Copy the code

The sample

<div id="example"></div>
Copy the code
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import ReactGridManager, { $gridManager } from 'gridmanager-react';
import 'gridmanager-react/css/gm-react.css';

// Component: action column
function ActionInner(props) {
    const actionAlert = event= > {
        alert('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}/>; Function EmptyTemplate(props) {return (<section style={{textAlign: 'center'}}> {props.text} </section> ); } / / components: title 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 type const TYPE_MAP = {'1': 'HTML/CSS', '2': 'nodeJS', '3': 'javaScript' and '4' : 'front chicken soup', '5' : 'PM Coffee', '6' : 'the front-end framework', '7' : 'the front-end related'}; return ( <button>{TYPE_MAP[props.type]}</button> ); Function DeleteComponents(props) {const {index, row} = props; function DeleteComponents(props) {const {index, row} = props; const deleteAction = event => { If (window. Confirm (` confirm to delete the current page first [${event. The target. The getAttribute (' data - the index ')}] article [' ${event. The target. The title}]? ')){console.log('---- delete operation started ----'); $gridManager.refreshGrid(option.gridManagerName); Console. log(' It's normal that the data doesn't change, because this is just an example and it doesn't actually delete the data.'); Console. log('---- deletion completed ----'); }}; Return (<span className={'plugin-action'} onClick={deleteAction} data-index={index} title={row.title}> delete </span>); } // Table component configuration const option = {gridManagerName: 'testReact', height: '100%', emptyTemplate: <EmptyTemplate text={' React table, no data '}/>, columnData: [{key: 'PIC ', remind: 'the PIC ', width: '110px', text: <img style={{width: '90px', margin: '0 auto'}} src={'https://www.lovejavascript.com' + pic} title={row.name}/> ); } },{ key: 'title', remind: 'the title', text: 'title', template: <TitleComponents/>},{key: 'type', remind: 'the type', text:' category ', align: 'center', template: (type, row, index) => { return <TypeComponents type={type}/>; } },{ key: 'info', remind: },{key: 'username', remind: 'the username', text: 'author ', // return 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', // return htmlString template with function: function(createDate, rowObject){ return new Date(createDate).toLocaleDateString(); } },{ key: 'lastDate', remind: 'The lastDate', width: '120px', text:' last change time ', sorting: ', // 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 to automatically add row, index to the props of the component template: <DeleteComponents/>}], supportRemind: true, isCombSorting: true, supportAjaxPage: true, supportSorting: true, ajax_data: 'http://www.lovejavascript.com/blogManager/getBlogList', ajax_type: 'POST', }; // Render callback const callback = query => {console.log('callback => ', query); }; ReactDOM.render( <ReactGridManager option={option} callback={callback} />, document.querySelector('#example') );Copy the code

Calling an open method

$gridManager is introduced via ES6 syntax.

import { $gridManager } from 'gridmanager-react';

/ / refresh
$gridManager.refreshGrid('testReact');

// Update the query criteria
$gridManager.setQuery('testReact', {name: 'baukh'});

/ /... For more, please visit the API directly
Copy the code

Viewing the Current Version

import GridManagerReact, {$gridManager} from 'gridmanager-react';
console.log('GridManagerReact version =>', GridManagerReact.version);
console.log('GridManager version =>', $gridManager.version);
Copy the code