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

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