如何选择整列进行拖动

Question

我有一个引导表，其中的数据是动态给定的。现在我的目标是拖放这些列，并在没有任何包的情况下手动执行：(此处可拖动事件适用于选择整行，但不适用于列

这是给html表的动态数据

let columns = [
{text: "Id", dataField: "id"},
{ text: "Name", dataField: "name" },
{ text: "Gender",dataField: "Gender",formatter: (row: any) => <Formatter row={row} type="Gender" />},
];
let data = [
{ id: 1, name: "Manikanta", age: 20, Gender: "male" },
{ id: 2, name: "Varsha", age: 22, Gender: "female" },
{ id: 3, name: "Sai", age: 18, Gender: "male" },
{ id: 4, name: "John", age: 24, Gender: "female" },
];
let expandabaledata = [
{ id: 1, content: "I am content 1" },
{ id: 2, content: "I am content 2" },
{ id: 3, content: "I am content 3" },
{ id: 4, content: "I am content 4" },
];
let settings = [{ expandable: true }];

这是我用于渲染html表的React代码

import React from "react";
import "./table.css";
const DynamicTable = (props) => {
return (
<div className="table-responsive">
<table className="table table-bordered table-hover"  data-reorderable-columns="true"  draggable="true">
<thead className="thead " >
<tr>
<th scope="col" className="text"  draggable="true"> #</th>
{props.col.map((col) => {
return (
<th scope="col" key={col.text} className="sortable text"  draggable="true" >
{col.text}
</th>
);
})}
</tr>
</thead>
{props.data.map((data) => {
return props.settings.map((settings) => {
return (
<tbody key={data.id} >

<tr
className="accordion-toggle collapsed"
data-toggle="collapse"
data-target={
settings.expandable ? "#col".concat(data.id.toString()) : ""
}
draggable="true"

>
{settings.expandable ? (
<td className="expand-button"></td>
) : (
<td></td>
)}
<td className="texts">
{props.col.map((col) => {
if (col.formatter && col.dataField === "id") {
return col.formatter(data);
}
if (!col.formatter && col.dataField === "id") {
return data.id;
}
})}
</td>
<td>
{props.col.map((col) => {
if (col.formatter && col.dataField === "name")
return col.formatter(data);
if (!col.formatter && col.dataField === "name") {
return data.name;
}
})}
</td>
<td>
{props.col.map((col) => {
if (col.formatter && col.dataField === "Gender")
return col.formatter(data);
if (!col.formatter && col.dataField === "Gender") {
return data.Gender;
}
})}
</td>
</tr>
{props.expanddata.map((exdata) => {
if (exdata.id === data.id) {
return (
<tr key={exdata.id} className="hide-table-padding">
<td colSpan={parseInt("5")}>
<div
className="collapse in hdelm p-1"
id={"col".concat(data.id.toString())}
>
<div className="row-3">{exdata.content}</div>
</div>
</td>
</tr>
);
}
})}
</tbody>
);
});
})}
</table>
</div>
);
};
export default DynamicTable;

我在这里的问题是，我如何用表的实现来选择整个列，或者如果有其他方法可以创建这些动态表，请建议

Answer 1

您可以使用基于jquery ui 的类似库的dragtable

在你的表被渲染后，用下面的打电话

$(".table").dragtable();

使用适当的选择器。上面使用了你发布的片段中的类名