将 react-grid-layout 放入具有 headers 和行的 table
Put a react-grid-layout into a table with headers and rows
我正在将 react-grid-layout 与 Laravel 7、AdminLTE 一起使用,我的结果还不错:
我想将此结果放入 table 中,如下所示,以获得 headers 和行:
你建议我在 reactjs 或简单的 html 中执行此操作吗?
如果你有示例代码,我很感兴趣。
这是我的代码:
import React from 'react';
import { WidthProvider, Responsive } from "react-grid-layout";
import _ from "lodash";
const ResponsiveReactGridLayout = WidthProvider(Responsive);
/**
* This layout demonstrates how to use a grid with a dynamic number of elements.
*/
export class AddRemoveLayout extends React.PureComponent {
static defaultProps = {
className: "layout",
cols: { lg: 7, md: 10, sm: 6, xs: 4, xxs: 2 },
rowHeight: 100,
preventCollision: true,
verticalCompact: false // //you may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property `verticalCompact` to `false` to achieve this effect.
};
onLayoutChange(layout) {
/*eslint no-console: 0*/
saveToLS("layout", layout);
this.setState({ layout });
this.props.onLayoutChange(layout); // updates status display
if (global.localStorage) {
try {
ls = JSON.parse(global.localStorage.getItem("rgl-7")) || {};
console.log(ls);
} catch (e) {
/*Ignore*/
}
}
}
constructor(props) {
super(props);
this.state = {
items: [0, 1, 2, 3, 4].map(function (i, key, list) {
return {
i: i.toString(),
x: i * 2,
y: 0,
w: 2,
h: 2,
//add: false //You can add an item by clicking here, too
};
}),
newCounter: 0
};
this.onAddItem = this.onAddItem.bind(this);
this.onBreakpointChange = this.onBreakpointChange.bind(this);
}
createElement(el) {
const removeStyle = {
position: "absolute",
right: "2px",
top: 0,
cursor: "pointer"
};
const i = el.add ? "+" : el.i;
return (
<div key={i} data-grid={el}>
{el.add ? (
<span
className="add text"
onClick={this.onAddItem}
title="You can add an item by clicking here, too."
>
Add +
</span>
) : (
<span className="text">{i}</span>
)}
<span
className="remove"
style={removeStyle}
onClick={this.onRemoveItem.bind(this, i)}
>
x
</span>
</div>
);
}
onAddItem() {
/*eslint no-console: 0*/
console.log("adding", "n" + this.state.newCounter);
this.setState({
// Add a new item. It must have a unique key!
items: this.state.items.concat({
i: "n" + this.state.newCounter,
x: (this.state.items.length * 2) % (this.state.cols || 12),
y: Infinity,
w: 2,
h: 2
}),
// Increment the counter to ensure key is always unique.
newCounter: this.state.newCounter + 1
});
}
// We're using the cols coming back from this to calculate where to add new items.
onBreakpointChange(breakpoint, cols) {
this.setState({
breakpoint: breakpoint,
cols: cols
});
}
onLayoutChange(layout) {
this.props.onLayoutChange(layout);
this.setState({ layout: layout });
}
onRemoveItem(i) {
console.log("removing", i);
this.setState({ items: _.reject(this.state.items, { i: i }) });
console.log(this.state);//
}
render() {
return (
<div>
<button onClick={this.onAddItem}>Add Item</button>
<ResponsiveReactGridLayout
onLayoutChange={this.onLayoutChange}
onBreakpointChange={this.onBreakpointChange}
{...this.props}
>
{_.map(this.state.items, el => this.createElement(el))}
</ResponsiveReactGridLayout>
</div>
);
}
}
提前致谢。
没有任何 css 或主题,带有示例负载。这通常是您生成非常基本的 table
的方式
const dates = [ '14/9', '16/9', '20/9', '30/0' ]
return ( <table>
<tr>
{dates.map((date, index) => <th>{index}</th>}
</tr>
<tr>
{ dates.map(date => <td>{item</td> }
</tr>
</table> )
我正在将 react-grid-layout 与 Laravel 7、AdminLTE 一起使用,我的结果还不错:
我想将此结果放入 table 中,如下所示,以获得 headers 和行:
你建议我在 reactjs 或简单的 html 中执行此操作吗?
如果你有示例代码,我很感兴趣。
这是我的代码:
import React from 'react';
import { WidthProvider, Responsive } from "react-grid-layout";
import _ from "lodash";
const ResponsiveReactGridLayout = WidthProvider(Responsive);
/**
* This layout demonstrates how to use a grid with a dynamic number of elements.
*/
export class AddRemoveLayout extends React.PureComponent {
static defaultProps = {
className: "layout",
cols: { lg: 7, md: 10, sm: 6, xs: 4, xxs: 2 },
rowHeight: 100,
preventCollision: true,
verticalCompact: false // //you may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property `verticalCompact` to `false` to achieve this effect.
};
onLayoutChange(layout) {
/*eslint no-console: 0*/
saveToLS("layout", layout);
this.setState({ layout });
this.props.onLayoutChange(layout); // updates status display
if (global.localStorage) {
try {
ls = JSON.parse(global.localStorage.getItem("rgl-7")) || {};
console.log(ls);
} catch (e) {
/*Ignore*/
}
}
}
constructor(props) {
super(props);
this.state = {
items: [0, 1, 2, 3, 4].map(function (i, key, list) {
return {
i: i.toString(),
x: i * 2,
y: 0,
w: 2,
h: 2,
//add: false //You can add an item by clicking here, too
};
}),
newCounter: 0
};
this.onAddItem = this.onAddItem.bind(this);
this.onBreakpointChange = this.onBreakpointChange.bind(this);
}
createElement(el) {
const removeStyle = {
position: "absolute",
right: "2px",
top: 0,
cursor: "pointer"
};
const i = el.add ? "+" : el.i;
return (
<div key={i} data-grid={el}>
{el.add ? (
<span
className="add text"
onClick={this.onAddItem}
title="You can add an item by clicking here, too."
>
Add +
</span>
) : (
<span className="text">{i}</span>
)}
<span
className="remove"
style={removeStyle}
onClick={this.onRemoveItem.bind(this, i)}
>
x
</span>
</div>
);
}
onAddItem() {
/*eslint no-console: 0*/
console.log("adding", "n" + this.state.newCounter);
this.setState({
// Add a new item. It must have a unique key!
items: this.state.items.concat({
i: "n" + this.state.newCounter,
x: (this.state.items.length * 2) % (this.state.cols || 12),
y: Infinity,
w: 2,
h: 2
}),
// Increment the counter to ensure key is always unique.
newCounter: this.state.newCounter + 1
});
}
// We're using the cols coming back from this to calculate where to add new items.
onBreakpointChange(breakpoint, cols) {
this.setState({
breakpoint: breakpoint,
cols: cols
});
}
onLayoutChange(layout) {
this.props.onLayoutChange(layout);
this.setState({ layout: layout });
}
onRemoveItem(i) {
console.log("removing", i);
this.setState({ items: _.reject(this.state.items, { i: i }) });
console.log(this.state);//
}
render() {
return (
<div>
<button onClick={this.onAddItem}>Add Item</button>
<ResponsiveReactGridLayout
onLayoutChange={this.onLayoutChange}
onBreakpointChange={this.onBreakpointChange}
{...this.props}
>
{_.map(this.state.items, el => this.createElement(el))}
</ResponsiveReactGridLayout>
</div>
);
}
}
提前致谢。
没有任何 css 或主题,带有示例负载。这通常是您生成非常基本的 table
的方式 const dates = [ '14/9', '16/9', '20/9', '30/0' ]
return ( <table>
<tr>
{dates.map((date, index) => <th>{index}</th>}
</tr>
<tr>
{ dates.map(date => <td>{item</td> }
</tr>
</table> )