这篇“layui加JQuery怎么实现上下移动效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“layui加JQuery怎么实现上下移动效果”文章吧。
思路：是将查出来的数据重新排序（主要是唯一ID及其数据位置调整）后台设置序号。只支持单选代码如何：
**// 第一步**
var data_tr;
//触发单选框选择
table.on('radio()', function(obj){ //test 是 table 标签对应的 lay-filter 属性
data_tr = $(this);
});
**// 上移**
function uptr() {
// 拿到列表集合
var datas = layui.table.cache["list"];
// 拿到选中的数据
var checkStatus = table.checkStatus('list'), data = checkStatus.data;
if (typeof (data[0]) == "undefined") {
layer.msg("请选择一条要移动的数据");
} else {
var tr = $(data_tr).parent().parent().parent();
debugger
if ($(tr).prev().html() == null) {
layer.msg("已经是最顶部了");
return;
}else{
// 未上移前，记录本行和下一行的数据
var tem = datas[tr.index()];
var tem2 = datas[tr.prev().index()];
// 将本身插入到目标tr之前
$(tr).insertBefore($(tr).prev());
// 上移之后，数据交换
datas[tr.index()] = tem;
datas[tr.next().index()] = tem2;
}
}
}
**// 上移最顶**
function upTop() {
var datas = layui.table.cache["list"];
var checkStatus = table.checkStatus('list'), data = checkStatus.data;
if (typeof (data[0]) == "undefined") {
layer.msg("请选择一条要移动的数据");
} else {
var tr = $(data_tr).parent().parent().parent();
if ($(tr).prev().html() == null) {
layer.msg("已经是最顶部了");
return;
}else{
// 将数据渲染到最前一条
$(tr).insertBefore($(tr).siblings(":first"));
// 删除选中这条的数据 $(tr).attr("data-index")拿到选中这条数据的序号
datas.splice($(tr).attr("data-index"), 1);
// 数组中的前面插入
datas.unshift(data[0]);
}
}
}
**// 下移**
function downtr() {
var datas = layui.table.cache["list"];
var checkStatus = table.checkStatus('list'), data = checkStatus.data;
if (typeof (data[0]) == "undefined") {
layer.msg("请选择一条要移动的数据");
} else {
var tr = $(data_tr).parent().parent().parent();
debugger
if ($(tr).next().html() == null) {
layer.msg("已经是最底部了");
return;
}else{
// 记录本行和下一行的数据
var tem = datas[tr.index()];
var tem2 = datas[tr.next().index()];
// 将本身插入到目标tr的后面
$(tr).insertAfter($(tr).next());
// 交换数据
datas[tr.index()] = tem;
datas[tr.prev().index()] = tem2;
}
}
}
**// 下移最底**
function downBottom() {
var datas = layui.table.cache["list"];
var checkStatus = table.checkStatus('list'), data = checkStatus.data;
debugger;
if (typeof (data[0]) == "undefined") {
layer.msg("请选择一条要移动的数据");
} else {
var tr = $(data_tr).parent().parent().parent();
debugger
if ($(tr).next().html() == null) {
layer.msg("已经是最底部了");
return;
}else{
// 将数据渲染到最后一条
$(tr).insertAfter($(tr).siblings(":last"));
datas.splice($(tr).attr("data-index"), 1);
// 在数组末尾处按顺序添加
datas.push(data[0]);
}
}
}
**// 最后调取修改接口**
function updateSortData() {
debugger
var instanceGUIDs = "";
var data = layui.table.cache["list"];
if(data.length > 1){
for (var i = 0; i < data.length; i++) {
instanceGUIDs += data[i].instanceGUID + ",";
}
}
$.post("/spring/office/todo/saveTodoSort", {
ids : instanceGUIDs,
userGUID : userGUID
}, function(data) {
if (data) {
$.newuiAlert('排序成功！');
// tableInit();
}else {
$.newuiAlert('排序失败！');
}
});
**// 实现**
@Autowired
private JdbcTemplate jdbcTemplate;
@RequestMapping("/saveTodoSort")
public @ResponseBody boolean saveTodoSort(HttpServletRequest request) {
String userGUID = request.getParameter("userGUID");
String ids = request.getParameter("ids");
boolean isSuccess = false;
try {
if (StringUtils.isNotBlank(userGUID) && StringUtils.isNotBlank(ids)) {
String[] instanceGUIDs = ids.split(",");
List<Object[]> batchParams = new ArrayList<Object[]>(instanceGUIDs.length);
String sql = "update OFFICE_WorkflowInstanceActors set STAR_LEVEL=? where WORKFLOWINSTANCE_GUID=? and PERSON_GUID=? and ACTORS_CLASSIFY=?";
for (int i = 0; i < instanceGUIDs.length; i++) {
batchParams.add(new Object[] { (instanceGUIDs.length - i), instanceGUIDs[i], userGUID, 1 });
}
jdbcTemplate.batchUpdate(sql, batchParams);
isSuccess = true;
}
} catch (Exception ex) {
ex.printStackTrace();
}
return isSuccess;
}
以上就是关于“layui加JQuery怎么实现上下移动效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
