js表格中sortable属性无法触发ajax请求

sortable属性只是用来指示表格列是否可以排序，并不会直接触发ajax请求。如果需要在表格排序时触发ajax请求，可以使用一些库或框架，比如jQuery的tablesorter插件或者Bootstrap table插件，它们可以在表格排序时自动发送ajax请求并更新表格数据。如果不使用插件或框架，可以在sortable的回调函数中手动发送ajax请求并更新表格数据。例如：

$("table").sortable({
  // 当表格列排序发生改变时触发回调函数
  change: function(event, ui) {
    // 发送ajax请求并更新表格数据
    $.ajax({
      url: "your_api_url",
      data: { sort_column: ui.item.index() },
      success: function(data) {
        // 更新表格数据
        $("table").html(data);
      }
    });
  }
});

相关问题

vue Sortable.js 用id声明表格怎么用克隆方法

如果你使用Vue Sortable.js，并且使用id来声明表格元素，你可以按照以下步骤使用克隆方法：

1. 在Vue组件的mounted钩子函数中获取表格元素的引用：

mounted() {
  this.table = document.getElementById('your-table-id'); // 获取表格元素的引用
},

2. 创建Sortable实例，并将克隆方法绑定到表格元素上：

mounted() {
  this.table = document.getElementById('your-table-id'); // 获取表格元素的引用
  
  this.sortable = new Sortable(this.table, {
    // 配置项...
    onClone: this.handleClone // 绑定克隆方法
  });
},

3. 编写克隆方法：

methods: {
  handleClone: function (event) {
    const clonedNode = event.item.cloneNode(true); // 克隆表格行元素
    // 对克隆的元素进行进一步操作
  }
}

在上述代码中，我们假设你使用id为'your-table-id'来声明表格元素，并通过document.getElementById('your-table-id')获取该元素的引用。然后，在Sortable的配置项中，通过onClone属性将克隆方法handleClone绑定到表格元素上。

在handleClone方法中，我们使用event.item来获取被拖拽的元素，并通过cloneNode方法对该元素进行克隆操作。你可以根据实际情况对克隆后的元素进行进一步处理。

请注意，上述代码只是一个示例，具体实现方式可能会因你的项目结构和需求而有所不同。根据你的实际情况进行相应的调整。希望对你有所帮助！

vue 中sortable

Vue中的Sortable是一个基于Sortable.js的Vue.js组件，它可以让你轻松地实现可拖拽和可排序的列表。它提供了一些方便的功能，如动画效果、事件处理、自定义样式等，可以让你快速地构建一个功能强大的可排序列表。

使用Sortable组件很简单，首先你需要在你的Vue项目中安装Sortable.js和vue-sortable这两个包。然后你可以在你的Vue组件中引入vue-sortable，并在需要排序的列表上使用sortable组件，如下所示：

<template>
  <div>
    <ul>
      <sortable v-model="list">
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </sortable>
    </ul>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import { Sortable, SortableMixin } from 'vue-sortable'

export default {
  mixins: [SortableMixin],
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    }
  }
}
</script>

在这个例子中，我们使用了v-model指令将列表绑定到了list数组上，并使用v-for指令渲染列表中的每一项。在sortable组件中，我们传递了一个options对象，用于配置Sortable.js的选项，例如启用动画效果、指定拖拽手柄、设置容器等。此外，我们还可以监听sortable的事件来处理排序的过程，例如onSort、onStart、onEnd等。

总之，Sortable是一个非常方便的Vue.js组件，可以让你快速地实现可拖拽和可排序的列表，让你的应用变得更加灵活和易用。