подвижные колонки таблицы

Question

$(function() {
  $(".draggable").draggable();
});

.headerTableau {
  background: #E4E3E1;
  color: #8A2336;
  text-shadow: 0 1px 1px gray;
}

.bodyTableau {
  padding: 10px 20px;
  background: #faf5f6;
}

.draggable {
  cursor: -webkit-grabbing;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="movableTableau ui-widget-content draggable">
  <table>
    <thead>
      <tr class="headerTableau">
        <th>колонна1</th>
        <th>колонна2</th>
        <th>колонна3</th>
        <th>колонна4</th>
        <th>колонна5</th>
      </tr>
    </thead>
    <tbody class="bodyTableau ">
      <tr>
        <th>текст1</th>
        <th>текст2</th>
        <th>текст3</th>
        <th>текст4</th>
        <th>текст5</th>
      </tr>
  </table>
</div>

кто-то знает как сделать колонки таблицы подвижными, чтоб можно было поменять колонку1 с колонкой2

таблица на Blazor Assembly на C# (поэтому ставлю метку), может есть готовые решения ?
двигает всю таблицу тут вот посмотрела как на Js сделано применяется к Div-у, к колонам не получилось

Если можно без использования Js, может библиотека какая делает для Веб Страниц на Блазор

нашла решение в bootstrap, именно то, что я ищу, колонки подвижные только у меня не получается использовать их код

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/akottr/dragtable@master/dragtable.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/akottr/dragtable@master/jquery.dragtable.js"></script>

<div class="toolbar">
  <button class="btn btn-primary" id="order1">Order by Name, ID, price</button>
  <button class="btn btn-primary" id="order2">Order by Price, Name, ID</button>
</div>

<table id="table" data-toolbar=".toolbar" data-show-columns="true" data-search="true" data-show-toggle="true" data-pagination="true" data-url="json/data1.json" data-reorderable-columns="true">
  <thead>
    <tr>
      <th data-field="id" data-sortable="true">ID</th>
      <th data-field="name" data-sortable="true">Item Name</th>
      <th data-field="price" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  $(function() {
    $('#table').bootstrapTable()

    $('#order1').on('click', () => {
      $('#table').bootstrapTable('orderColumns', {
        name: 0,
        id: 1,
        price: 2
      })
    })

    $('#order2').on('click', () => {
      $('#table').bootstrapTable('orderColumns', {
        price: 0,
        name: 1,
        id: 2
      })
    })
  })
</script>

Answer 1

// Function to demonstrate calling grid's API
function deselect() {
  gridOptions.api.deselectAll()
}

// Grid Options are properties passed to the grid
const gridOptions = {

  // each entry here represents one column
  columnDefs: [{
      field: "make"
    },
    {
      field: "model"
    },
    {
      field: "price"
    },
  ],

  // default col def properties get applied to all columns
  defaultColDef: {
    sortable: true,
    filter: true
  },

  rowSelection: 'multiple', // allow rows to be selected
  animateRows: true, // have rows animate to new positions when sorted

  // example event handler
  onCellClicked: params => {
    console.log('cell was clicked', params)
  }
};

// get div to host the grid
const eGridDiv = document.getElementById("myGrid");
// new grid instance, passing in the hosting DIV and Grid Options
new agGrid.Grid(eGridDiv, gridOptions);

// Fetch data from server
fetch("https://www.ag-grid.com/example-assets/row-data.json")
  .then(response => response.json())
  .then(data => {
    // load fetched data into grid
    gridOptions.api.setRowData(data);
  });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Ag Grid App</title>
  <!-- Include the JS for AG Grid -->
  <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
  <!-- Include the core CSS, this is needed by the grid -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css" />
  <!-- Include the theme CSS, only need to import the theme you are going to use -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css" />
</head>

<body>
  <!-- Button to demonstrate calling the grid's API. -->
  <button onclick="deselect()">Deselect Rows</button>
  <!-- The div that will host the grid. ag-theme-alpine is the theme. -->
  <!-- The gid will be the size that this element is given. -->
  <div id="myGrid" class="ag-theme-alpine" style="height: 500px"></div>

</body>

</html>

поробуйте такой вариант

БЛОГ НА HUSL

подвижные колонки таблицы

Ответы (1 шт):