一、简单的表格拖拽

1、sortablejs

地址：https://www.itxst.com/sortablejs/neuinffi.html

配置项： http://www.sortablejs.com/options.html

Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。

第一步：安装

npm install sortablejs --save

第二步：使用方法

<template><div style="width: 800px"><el-table :data="tableData" border row-key="id" align="left"><el-table-column type="index" width="50"> </el-table-column><el-table-columnv-for="(item, index) in col":key="`col_${index}`":prop="dropCol[index].prop":label="item.label"></el-table-column></el-table><pre style="text-align: left">{{ dropCol }}</pre><hr /><pre style="text-align: left">{{ tableData }}</pre></div>
</template>
<script>
import Sortable from "sortablejs";export default {data () {return {col: [......],//行表头dropCol: [.....],//列表头tableData: [.....],//表格数据};},mounted () {this.rowDrop();this.columnDrop();},methods: {//行拖拽rowDrop () {const tbody = document.querySelector(".el-table__body-wrapper tbody");const _this = this;Sortable.create(tbody, {// 官网上的配置项,加到这里面来,可以实现各种效果和功能animation: 150,ghostClass: "blue-background-class",onEnd ({ newIndex, oldIndex }) {// oldIndex是拖动一行原来的位置，newIndex是拖动后的位置const currRow = _this.tableData.splice(oldIndex, 1)[0];_this.tableData.splice(newIndex, 0, currRow);}});},//列拖拽columnDrop () {const wrapperTr = document.querySelector(".el-table__header-wrapper tr");this.sortable = Sortable.create(wrapperTr, {animation: 180,delay: 0,onEnd: evt => {const oldItem = this.dropCol[evt.oldIndex];this.dropCol.splice(evt.oldIndex, 1);this.dropCol.splice(evt.newIndex, 0, oldItem);}});}}
};
</script>

完整代码

<template><div style="width: 800px"><el-table :data="tableData" border row-key="id" align="left"><el-table-column type="index" width="50"> </el-table-column><el-table-columnv-for="(item, index) in col":key="`col_${index}`":prop="dropCol[index].prop":label="item.label"></el-table-column></el-table><pre style="text-align: left">{{ dropCol }}</pre><hr /><pre style="text-align: left">{{ tableData }}</pre></div>
</template>
<script>
import Sortable from "sortablejs";export default {data () {return {col: [{label: "日期",prop: "date"},{label: "姓名",prop: "name"},{label: "地址",prop: "address"}],dropCol: [{label: "日期",prop: "date"},{label: "姓名",prop: "name"},{label: "地址",prop: "address"}],tableData: [{id: "1",date: "2019-12-23",name: "王小虎1",address: "上海市普陀区金沙江路 100 弄"},{id: "2",date: "2019-12-22",name: "王小虎2",address: "上海市普陀区金沙江路 200 弄"},{id: "3",date: "2019-12-21",name: "王小虎3",address: "上海市普陀区金沙江路 300 弄"},{id: "4",date: "2019-12-20",name: "王小虎4",address: "上海市普陀区金沙江路 400 弄"}]};},mounted () {this.rowDrop();this.columnDrop();},methods: {//行拖拽rowDrop () {const tbody = document.querySelector(".el-table__body-wrapper tbody");const _this = this;Sortable.create(tbody, {// 官网上的配置项,加到这里面来,可以实现各种效果和功能animation: 150,ghostClass: "blue-background-class",onEnd ({ newIndex, oldIndex }) {// oldIndex是拖动一行原来的位置，newIndex是拖动后的位置const currRow = _this.tableData.splice(oldIndex, 1)[0];_this.tableData.splice(newIndex, 0, currRow);}});},//列拖拽columnDrop () {const wrapperTr = document.querySelector(".el-table__header-wrapper tr");this.sortable = Sortable.create(wrapperTr, {animation: 180,delay: 0,onEnd: evt => {const oldItem = this.dropCol[evt.oldIndex];this.dropCol.splice(evt.oldIndex, 1);this.dropCol.splice(evt.newIndex, 0, oldItem);}});}}
};
</script>

二、树状拖拽

1、drag-tree-table

地址：https://www.npmjs.com/package/drag-tree-table

基于vue实现的可以拖拽排序的树形表格

支持拖拽排序、固定头、拖拽改变行宽，checkbox多选、自定义单元格内容、设置行的背景色、动态控制某些行是否可以拖拽等等....

第一步：安装

npm i drag-tree-table

第二步：使用方式

<template><div id="app"><dragTreeTable:data="treeData":onDrag="onTreeDataChange"fixedborder></dragTreeTable></div>
</template><script>
import dragTreeTable from "drag-tree-table";
export default {name: "app",data() {return {treeData: {columns: [...],lists: [...]}};},components: {dragTreeTable},methods: {onTreeDataChange(list) {this.treeData.lists = list;}},
};
</script>

完整代码——方式一

<script>
import dragTreeTable from "drag-tree-table";export default {components: {dragTreeTable},data () {return {treeData: {custom_field: {id: 'id',order: 'sort',lists: 'children',parent_id: 'parent_id'},columns: [{ type: 'selection', title: '日期', field: 'date', width: 200 },{ title: '姓名', field: 'name', width: 100 },{title: '操作',type: 'action',width: 350,align: 'center',actions: [{text: '查看角色',onclick: (item) => {// item是当前行的数据console.log(item)},formatter: (item) => {return '<i style="margin-right:20px">查看角色</i>'}},{text: '编辑',onclick: (item) => {// item是当前行的数据console.log(item)},formatter: (item) => {return '<i>编辑</i>'}}]},],lists: [{open: true,id: "1",parent_id: '0',date: "2019-12-23",name: "王小虎1",address: "上海市普陀区金沙江路 100 弄",children: [{id: "1-1",parent_id: '1',date: "2019-12-22",name: "王小虎1-1",address: "上海市普陀区金沙江路 200 弄"}, {id: "1-2",parent_id: '1',date: "2019-12-22",name: "王小虎1-2",address: "上海市普陀区金沙江路 200 弄"},]},{id: "2",date: "2019-12-22",name: "王小虎2",address: "上海市普陀区金沙江路 200 弄"},{id: "3",date: "2019-12-21",name: "王小虎3",address: "上海市普陀区金沙江路 300 弄"},{id: "4",date: "2019-12-20",name: "王小虎4",address: "上海市普陀区金沙江路 400 弄"}]},};},methods: {onTreeDataChange (list) {this.treeData.lists = list;// this.tableData = list;},}
};
</script>

完整代码——方式二

<template><div style="width: 800px"><dragTreeTableref="table":data="treeData"@drag="onTreeDataChange"resizefixed:isdraggable="true"><template #selection="{ row }">{{ row.date }}</template><template #visible="{ row }"><div @click.stop><el-switch@change="(val) => {visiableChange(val, row)}"v-model="row.visible"active-value="0"inactive-value="1"/></div></template><template #edit="{ row }"><el-buttontype="text"icon="el-icon-edit"@click.stop.prevent="handleUpdate(row)">编辑</el-button><el-buttontype="text"icon="el-icon-plus"@click.stop.prevent="handleAdd(row)">新增</el-button><el-buttonclass="btn-delete"type="text"icon="el-icon-delete"@click.stop.prevent="handleDelete(row)">删除</el-button></template></dragTreeTable></div>
</template>
<script>
import dragTreeTable from "drag-tree-table";export default {components: {dragTreeTable},data () {return {// 树状treeData: {custom_field: {id: 'id',order: 'sort',lists: 'children',parent_id: 'parent_id'},columns: [{ type: 'selection', title: '日期', field: 'date', width: 200 },{ title: '姓名', field: 'name', width: 100 },{type: 'visible',title: '可见',field: 'visible',width: 80},{type: 'edit',title: '操作',field: '',width: 200,align: 'center'},],lists: [{open: true,id: "1",parent_id: '0',date: "2019-12-23",name: "王小虎1",address: "上海市普陀区金沙江路 100 弄",children: [{id: "1-1",parent_id: '1',date: "2019-12-22",name: "王小虎1-1",address: "上海市普陀区金沙江路 200 弄"}, {id: "1-2",parent_id: '1',date: "2019-12-22",name: "王小虎1-2",address: "上海市普陀区金沙江路 200 弄"},]},{id: "2",date: "2019-12-22",name: "王小虎2",address: "上海市普陀区金沙江路 200 弄"},{id: "3",date: "2019-12-21",name: "王小虎3",address: "上海市普陀区金沙江路 300 弄"},{id: "4",date: "2019-12-20",name: "王小虎4",address: "上海市普陀区金沙江路 400 弄"}]},};},methods: {onTreeDataChange (list) {this.treeData.lists = list;}, }
};
</script>

表格拖拽、树状拖拽的各种方法相关推荐

表格树形结构 HTML CSS,基于jQuery ztree实现表格风格的树状结构
zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(M ...
mysql如何实现树状结构_实现树状结构的两种方法
实现树状结构的两种方法实现树状结构的两种方法 1.递归法递归是指在函数中显式的调用它自身. 利用递归法实现树状结构的特点是写入数据速度较快,显示速度较慢(在树的分支/层次较多的情况下尤其明显).适 ...
PHP树结构的应用,实现树状结构的两种方法-PHP教程,PHP应用
代码:--------------------------– create table `tree1` ( `id` tinyint(3) unsigned not null auto_increme ...
Java Swing 树状组件JTree的使用方法【图】
树中特定的节点可以由 TreePath(封装节点及其所有祖先的对象)标识,或由其显示行(其中显示区域中的每一行都显示一个节点)标识.展开节点是一个非叶节点(由返回 false 的 TreeModel ...
【牛客 - 368B】选点（dfs序，LIS 或 dfs序 + 树状数组 + 离散化，树状数组求LIS的方法）
题干: 有一棵n个节点的二叉树,1为根节点,每个节点有一个值wi.现在要选出尽量多的点. 对于任意一棵子树,都要满足: 如果选了根节点的话,在这棵子树内选的其他的点都要比根节点的值大: 如果在左子树选 ...
树状数组讲解和题目集
树状数组树状数组作为一种实现简单.应用较广的高级数据结构,在OI界的地位越来越重要,下面我来简单介绍一下树状数组和它的简单应用. 一.树状数组简介树状数组:顾名思义,是一种数组,其中包含了树的思想 ...
一行 Python 代码轻松构建树状热力图
今天和大家一起学习一种可视化技术:构建树状热力图treemap.树形图易于可视化,且易于被人理解.树状图通过展示不同大小的矩形,以传达不同大小的数据量,一般认为,较大的矩形意味着占总体的一大部分,而较 ...
解决laravel-admin 树状模型删除失效
解决laravel-admin 树状模型删除失效处理方法处理方法修改 vendor\encore\laravel-admin\src\Tree.php 中的 script() 方法: //原代码 ...
树状数组与其应用（Python实现）（1）
数组-树状数组如果程序需要维护一个数组的**前缀和**,S[i] = a[0]+ a[1] + -- + a[i-1]. 那么一旦数组中的一个元素 a[k]发生改变,则S[k+1] -- S[N] ...

表格拖拽、树状拖拽的各种方法

一、简单的表格拖拽

1、sortablejs

二、树状拖拽

1、drag-tree-table

表格拖拽、树状拖拽的各种方法相关推荐

最新文章

热门文章