如何选择整列进行拖动

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

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

在你的表格被渲染后，用下面的方式拨打电话

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

使用适当的选择器。以上使用您发布的 sn-p 中的类名