我如何选择整个列进行拖动

问题描述

我有一个引导表，其中的数据是动态给出的。现在，我的目标是拖放这些列并手动进行，而无需任何包:( 可拖动事件在这里用于选择整行，但不适用于列

以下是提供给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,{ id: 4,name: "John",age: 24,];
  let expandabaledata = [
    { id: 1,content: "I am content 1" },content: "I am content 2" },content: "I am content 3" },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;

我的问题是我如何在实现表的过程中选择整列，或者是否有其他方法可以创建这些动态表

解决方法

你可以使用像 dragtable 这样的基于 jquery ui 的库

在您的表格呈现后，使用如下所示的内容进行调用

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

使用合适的选择器。以上使用您发布的代码段中的类名