vue中使用sortablejs来实现表格拖拽排序
1、前端vue页面(rowDrop 方法实现行拖拽)<template><div class="mod-config"><el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"><el-form-item>...
·
1、前端vue页面(rowDrop 方法实现行拖拽)
<template>
<div class="mod-config">
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item>
<el-input v-model="dataForm.name" placeholder="网站名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">查询</el-button>
<el-button type="success" @click="addOrUpdateHandle()">新增</el-button>
<el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
<el-button type="warning" @click="goBack()">返回</el-button>
</el-form-item>
</el-form>
<el-table
row-key="id"
:data="dataList"
border
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
<el-table-column
type="selection"
header-align="left"
align="left"
width="50">
</el-table-column>
<!--<el-table-column
width="150"
prop="orderNumber"
header-align="left"
align="left"
label="排列序号">
</el-table-column>-->
<el-table-column
prop="name"
header-align="left"
align="left"
label="网站名称">
<template slot-scope="scope">
<a :href="scope.row.netAddress" target="_blank" style="text-decoration: none; color: black;">{{scope.row.name}}</a>
</template>
</el-table-column>
<el-table-column
prop="netAddress"
header-align="left"
align="left"
label="网站地址">
</el-table-column>
<el-table-column
prop="operation"
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[5, 10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :classifyId="this.classify" @refreshDataList="getDataList"></add-or-update>
</div>
</template>
<script>
import AddOrUpdate from './outdata-add-or-update'
import Sortable from 'sortablejs'
export default {
data () {
return {
dataForm: {
id: '',
name: '',
classify: '',
orderNumber: '',
netAddress: ''
},
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false
}
},
components: {
AddOrUpdate,
Sortable
},
// 组件实例化完毕,但页面还未显示,接收上个页面传过来的参数
created () {
this.classify = this.$route.params.classifyId
},
activated () {
this.getDataList()
},
mounted () {
this.rowDrop()
},
methods: {
// 获取数据列表
getDataList () {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/xxx/outdata/list'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
'classify': this.classify,
'name': this.dataForm.name
})
}).then(({data}) => {
if (data && data.code === 0) {
this.dataList = data.page.list
this.totalPage = data.page.totalCount
} else {
this.dataList = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
// 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
},
// 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
},
// 多选
selectionChangeHandle (val) {
this.dataListSelections = val
},
// 新增 / 修改
addOrUpdateHandle (id) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id)
})
},
// 删除
deleteHandle (id) {
var ids = id ? [id] : this.dataListSelections.map(item => {
return item.id
})
this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$http({
url: this.$http.adornUrl('/xxx/outdata/delete'),
method: 'post',
data: this.$http.adornData(ids, false)
}).then(({data}) => {
if (data && data.code === 0) {
this.$message({
message: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
})
},
// 行拖拽
rowDrop () {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
Sortable.create(tbody, {
onEnd: ({ newIndex, oldIndex }) => {
this.$http({
url: this.$http.adornUrl('/xxx/outdata/drag'),
method: 'get',
params: this.$http.adornParams({
'pageIndex': this.pageIndex,
'pageSize': this.pageSize,
'newIndex': newIndex,
'oldIndex': oldIndex
})
}).then(() => {
this.getDataList()
})
}
})
},
goBack () {
this.$router.back(-1)
}
}
}
</script>
2、后端代码
2.1Controller层
/**
* 拖拽后的排序
*/
@RequestMapping("/drag")
@RequiresPermissions("xxx:outdataClassify:drag")
public R drag(@RequestParam Map<String, Object> params) {
outdataClassifyService.reorder(params);
return R.ok();
}
2.2Service和ServiceImpl层
public interface OutdataClassifyService extends IService<OutdataClassifyEntity> {
void reorder(Map<String, Object> params);
}
@Service("outdataClassifyService")
public class OutdataClassifyServiceImpl extends ServiceImpl<OutdataClassifyDao, OutdataClassifyEntity>
implements OutdataClassifyService {
@Autowired
private OutdataClassifyDao outdataClassifyDao;
@Override
public void reorder(Map<String, Object> params) {
Integer pageIndex = Integer.valueOf((String) params.get("pageIndex"));
Integer pageSize = Integer.valueOf((String) params.get("pageSize"));
Integer newIndex = Integer.valueOf((String) params.get("newIndex"));
Integer oldIndex = Integer.valueOf((String) params.get("oldIndex"));
if (pageIndex != null && pageSize != null && newIndex != null && oldIndex != null) {
int dragFromOrder = (pageIndex - 1) * pageSize + 1 + oldIndex;
int dragToOrder = (pageIndex - 1) * pageSize + 1 + newIndex;
int from = dragFromOrder > dragToOrder ? dragToOrder : dragFromOrder;
int to = dragFromOrder < dragToOrder ? dragToOrder : dragFromOrder;
Map<String, Object> columnMap = new HashMap<String, Object>();
columnMap.put("order_number", dragFromOrder);
List<OutdataClassifyEntity> list = outdataClassifyDao.selectByMap(columnMap);
OutdataClassifyEntity outdataClassifyEntity = list.get(0);
outdataClassifyEntity.setOrderNumber(-1);
outdataClassifyDao.updateById(outdataClassifyEntity);
if (dragFromOrder < dragToOrder) {
outdataClassifyDao.reorderClassify(from+1, to, -1);
} else {
outdataClassifyDao.reorderClassify(from, to-1, 1);
}
Map<String, Object> columnMap2 = new HashMap<String, Object>();
columnMap2.put("order_number", -1);
List<OutdataClassifyEntity> list2 = outdataClassifyDao.selectByMap(columnMap2);
OutdataClassifyEntity outdataClassifyEntity2 = list2.get(0);
outdataClassifyEntity2.setOrderNumber(dragToOrder);
outdataClassifyDao.updateById(outdataClassifyEntity2);
}
}
}
2.3Dao层和MapperXML层
@Mapper
public interface OutdataClassifyDao extends BaseMapper<OutdataClassifyEntity> {
void reorderClassify(int from, int to, int value);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.richfit.modules.mtkl.dao.OutdataClassifyDao">
<select id="reorderClassify">
UPDATE mtkl_outdata_classify SET order_number = order_number +
#{value} WHERE order_number BETWEEN #{from} AND #{to}
</select>
</mapper>
最终的效果如下:
更多推荐
已为社区贡献6条内容
所有评论(0)